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 像素的空间，也就是将元素向右移动。
<html>
<head>
<style>
.relative_left{
position:relative;
left:50px;
}
.relative_top{
position:relative;
top:100px;
}
div{
background:yellow;
}
</style>
</head>
<body>
<div class="relative_left"> 这是一个相对定位的段落，left:50</div>
<div>这是一个普通段落</div>
<div class="relative_top"> 这是一个相对定位的段落，top:100px</div>
</body>
</html>
绝对定位
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
<html>
<head>
<style type="text/css">
.absolute{
position:absolute;
left:200px;
top:200px;
}
</style>
</head>
<body>
<p class="absolute">这是一个绝对定位的段落,他的位置是相对于原点(200,200)</p>
<div style="position:absolute;left:100px;top:100px;">
<p class="absolute">这是一个绝对定位的段落，他相对于div的位置是(200,200),实际位置应该是(300,300)</p>
</div>
</body>
</html>
所以绝对定位的位置也是相对的，相对于父元素的位置
z-index 属性
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
元素可拥有负的 z-index 属性值。
<html>
<head>
<style type="text/css">
.z-index{
position:absolute;
left:10px;
z-index:-1;
}
</style>
</head>
<body>
<img class="z-index" src="素材/1.png"><img>
<p>这是一个普通段落</p>
</body>
</html>
浮动
float
可能的值：
| 值 | 描述 |
|---|---|
| left： | 向左浮动 |
| right： | 向右浮动 |
| none： | 不浮动，默认值 |
| inherit： | 继承 |
clear
clear 属性规定元素的哪一侧不允许其他浮动元素。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
<html>
<head>
<style type="text/css">
.a{
float:left;
clear:both;
width:200;
height:200;
background-color:green;
}
.b{
float:left;
clear:both;
width:200;
height:200;
background-color:blue;
}
.d{
float:left;
clear:both;
width:200;
height:200;
background-color:gray;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="d"></div>
</body>
</html>
如果需要完成以下的效果，可以在第二段之前加上一个外边距，将第二段挤到下方区域
当div中的元素都是浮动的时，因为内部元素不占据空间，所以div会变得非常小，并且不可见，为了看到div的效果，需要加上一个看不见的clear标记
效果如图：
不过，还有一种法法可以避免这种问题，就是讲div进行浮动，这样div中就会显示出真实的大小。但是这样会影响下一个元素的样式。
<!--使用没有意义的clear元素-->
<html>
<head>
<style type="text/css">
.news {
background-color: yellow;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
</style>
</head>
<body>
<div class="news">
<img src="素材/1.png" />
<p>some text</p>
<!--没有意义的标记，但是可以看到浮动的div-->
<div style="clear:both"></div>
</div>
</body>
</html>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 等。
<html>
<head>
<style>
.s{
display:block;
}
.s2{
display:inline;
}
p{
background:green;
}
</style>
</head>
<body>
<p >这是一个普通的段落</p>
<p class="s">这是一个块级段落</p>
<p class="s2">这是一个内联段落<p>
</body>
</html>
可见p元素是一个块级元素
<html>
<head>
<style>
.s{
display:block;
}
.s2{
display:inline;
}
span{
background:green;
}
</style>
</head>
<body>
<span >这是一个普通的段落</span>
<span class="s">这是一个块级段落</span>
<span class="s2">这是一个内联段落<span>
<span>这是一个普通段落</span>
</body>
</html>
块级段落前后会自带换行，而内联元素不会，他们会显示在一行
内联元素不能定义宽度
inline-block与block的区别在于inline-block可以控制大小，而且显示时像内联元素一样没有换行，排列在同一行中。
