本文共 2879 字，大约阅读时间需要 9 分钟。
position属性
absolute： 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed： 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative： 生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。 static： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit： 规定应该从父元素继承 position 属性的值。
相对定位
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
position:relative;将 top 设置为 100px，框出现在在原位置顶部下面 100 像素的地方。
将 left 设置为 50 px，那么会在元素左边创建 50 像素的空间，也就是将元素向右移动。
这是一个相对定位的段落，left:50这是一个普通段落这是一个相对定位的段落，top:100px
绝对定位
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
这是一个绝对定位的段落,他的位置是相对于原点(200,200)
这是一个绝对定位的段落，他相对于div的位置是(200,200),实际位置应该是(300,300)
所以绝对定位的位置也是相对的，相对于父元素的位置
z-index 属性
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。 元素可拥有负的 z-index 属性值。![]()
这是一个普通段落
浮动
float
可能的值：
| 值 | 描述 |
|---|---|
| left： | 向左浮动 |
| right： | 向右浮动 |
| none： | 不浮动，默认值 |
| inherit： | 继承 |
clear
clear 属性规定元素的哪一侧不允许其他浮动元素。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
如果需要完成以下的效果，可以在第二段之前加上一个外边距，将第二段挤到下方区域
当div中的元素都是浮动的时，因为内部元素不占据空间，所以div会变得非常小，并且不可见，为了看到div的效果，需要加上一个看不见的clear标记
效果如图：
不过，还有一种法法可以避免这种问题，就是讲div进行浮动，这样div中就会显示出真实的大小。但是这样会影响下一个元素的样式。
some text
display显示属性
定义建立布局时元素生成的显示框类型
可能的值：
none: 此元素不会被显示。
block: 此元素将显示为块级元素，此元素前后会带有换行符。 inline: 此元素会被显示为内联元素，元素前后没有换行符。默认。 inline-block: 行内块元素。（CSS2.1 新增的值） list-item: 此元素会作为列表显示。 run-in: 此元素会根据上下文作为块级元素或内联元素显示。 compact: CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 marker: CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。 table: 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 inline-table: 此元素会作为内联表格来显示（类似<table>），表格前后没有换行符。 table-row-group: 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。 table-header-group: 此元素会作为一个或多个行的分组来显示（类似 <thead>）。 table-footer-group: 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。 table-row: 此元素会作为一个表格行显示（类似 <tr>）。 table-column-group: 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。 table-column: 此元素会作为一个单元格列显示（类似 <col>） table-cell: 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） table-caption: 此元素会作为一个表格标题显示（类似 <caption>） inherit: 规定应该从父元素继承 display 属性的值。
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。这是一个普通的段落
这是一个块级段落
这是一个内联段落
这是一个普通的段落这是一个块级段落这是一个内联段落这是一个普通段落
块级段落前后会自带换行，而内联元素不会，他们会显示在一行
内联元素不能定义宽度 inline-block与block的区别在于inline-block可以控制大小，而且显示时像内联元素一样没有换行，排列在同一行中。