Web开发——CSS基础（文本（Text））

1、CSS 定位属性（Positioning）

属性

描述

CSS

设置定位元素下外边距边界与其包含块下边界之间的偏移。

clear

规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

clip

剪裁绝对定位元素。

cursor

规定要显示的光标的类型（形状）。

display

规定元素应该生成的框的类型。

float

规定框是否应该浮动。float是css样式中的定位属性，用于设置标签的居左浮动和居右浮动，浮动后的元素不属于html文档流，需要用清除浮动把文档拽回到文档流中。

html文档流：自窗体自上而下分成一行一行，并在每行中按从左到右的顺序排放元素。

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6         <meta http-equiv="Content-Language" content="zh-cn" />
 7         <title>My test page</title>
 8         
 9         <script src="jquery-3.3.1.js"></script>
10 
11         <style>
12             div {
13                 width: 200px;
14                 height: 200px;
15             }
16             div.d1 {
17                 background: red;
18                 float: left;
19             }
20             div.d2 {
21                 background: blue;
22                 float: left;
23             }
24             div.d3 {
25                 width: 500px;
26                 height: 500px;            
27                 background: green;
28                 float: left;
29             }
30             div.clear {
31                 width: 0px;
32                 height: 0px;            
33                 clear: both;
34             }
35         </style>
36     </head>
37     
38     <body>
39 
40         <div class="d1"></div>
41         <div class="d2"></div>
42         
43         <div class="clear"></div>        <!--作用是用于清除浮动-->
44         <div class="d3"></div>
45         
46     </body>
47 </html>