三种网页布局方式：普通流、浮动、定位
普通流：浏览器默认方式，块元素从上到下排序，行内元素从左到右排序（碰到父元素的边界会自动换行）
浮动
让一行内容纳多个盒子
核心：脱离普通流的控制
float:left | right | none(默认)
float:inherit；/*继承父元素的float属性值*/
元素浮动后，会把本来占据的空间让给下一个元素，自己转换成类似行内块的元素
浮动起来的盒子互相贴靠在一起，如果父级宽度装不下了，多出的盒子会自动换行
列表浮动
让li排列在同一行
li{
float:left;
}
清除浮动
父盒子会产生自适应子盒子的高度
四种方法：额外标签、父级overflow、after伪元素、双伪元素
额外标签
添加一个新标签，设置该标签清除浮动
clear:left | right | both
父级添加overflow
overflow:hidden | auto | scroll
after伪元素
是额外标签的升级版，利用CSS3的新特性自动创建一个叫after的伪元素，再利用clear:both清除浮动
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/*IE6\7专用清除浮动写法*/
.clearfix{
*zoom:1;
}
<div class="father clearfix">
<div class="son"></div>
</div>
双伪元素
利用CSS3的新特性自动创建before和after两个伪元素，再利用clear:both进行浮动清除
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
/*IE6\7专用清除浮动写法*/
.clearfix{
*zoom:1;
}
<div class="father clearfix">
<div class="son"></div>
</div>
display:none 和 visibility:hidden的区别：
visibility方式隐藏的元素仍然在页面中占据空间，display不再占了。
display:table 转换为表格形式
overflow溢出
overflow清除浮动
定位
将盒子定在页面的某个位置
定位由两部分组成：定位模式 ｜ 边偏移；
定位模式：相对定位、绝对定位、固定定位、静态定位
边偏移：top / bottom、left / right
(不能同时使用top和bottom，left和right)
静态定位：无定位，无法使用边偏移来调整盒子位置
相对定位：relative
元素相对于自己在标准流中的位置，不会放弃该位置，不会脱离标准流；
div{
position:relative;
left:50px;
top:50px;
}
绝对定位：absolute
以带有定位（相对、绝对、固定）的父级元素来计算定位位置，如果父级没有定位，则找父级的父级
绝对定位会脱离标准流，不再占据原来的位置
<div class="father">
<div class="son"></div>
</div>
.father{
position: relative;
width: 500px;
height: 500px;
background-color: red;
margin-top: 100px;
margin-left:100px;
}
.son{
position:absolute;
left:50px;
top:50px;
width: 200px;
height: 200px;
background-color: blue;
}
子绝父相：子元素使用绝对定位，父元素使用相对定位。
父元素使用相对定位不会脱离标准流，更加方便页面布局；子元素使用绝对定位脱离标准流，可以在父元素中随意定位
固定定位：fixed
将盒子定位到页面的固定位置
固定定位脱离了标准流，只认浏览器的可视窗口
position:fixed;
top:300px;
left:0;
寻找最后一个子元素：
li:last-child{
border-bottom: 0px;
}
鼠标变成手：
cursor:pointer;
堆叠
定位会让盒子重叠，后面的盒子会压住前面的盒子
z-index调整盒子的堆叠顺序，默认值为0
z-index:整数值;
z-index:1;
h5语义化标签：
- header 头部标签
- nav 导航标签
- article 内容标签
- section 块级标签
- aside 侧边栏标签
- footer 尾部标签
