传统网页布局的三种方式
- 标准流/普通流/文档流（块级元素独占一行，从上往下排列，行内元素从左到右按顺序排列）
- 浮动
- 定位
多个块元素纵向排列用标准流，多个块元素横向排列用浮动
浮动
- 浮动元素会脱离标准流&浮动的盒子不再保留原先的位置
- 浮动元素会一行内显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
浮动特性（重难点）
- 如果块级元素没有设置宽度，默认宽度和父级一样，但是添加浮动之后，他的大小根据内容来决定
- 浮动的盒子中间没有缝隙，是紧紧挨在一起的
- 行内元素同理
浮动布局注意点
- 浮动和标准流的父盒子搭配（先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置）
- 一个元素浮动了，其余的兄弟元素也要浮动（浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流）
清除浮动
为什么要清除浮动
由于父级盒子很多情况不方便给高度，但是浮动的盒子不占用位置，最后父级高度为0，会影响下面的布局
父级盒子高度为0，所以显示不出来，如下所示：
如何清除浮动
- 额外标签法也成为隔墙法，是W3C推荐的做法
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
额外标签
在浮动元素的末尾添加一个空标签或其他标签比如</br>等
空标签（这个空标签必须是块级元素）：
<div style="clear: both;"></div>
给父元素添加overflow
给父元素的样式添加overflow的代码就可以overflow:hidden但是这无法显示溢出的部分
after伪元素
给父元素追加一个样式，样式如下：
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6\7 专用 */
*zoom: 1;
}
双伪元素清除浮动
同样要给父元素追加样式，如下所示：
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
CSS属性书写顺序
定位
- 可以让一个元素自由的在盒子里移动位置，并且压住其他的盒子
- 滚动屏幕的时候，可以让盒子固定在某个位置
定位组成
定位=定位模式+边偏移
相对定位：relative
在元素移动位置的时候，相对于它原来的位置进行移动
选择器 { position: relative; }
- 相对于原来的位置进行移动（参照点是原来的位置）
- 原来的位置继续占有，后面的盒子仍然已标准流的形式对待它。（不脱标，继续保留原来的位置）
绝对定位：absolute
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
- 如果祖先元素有定位，则以最近一级有定位的祖先元素为参考点移动位置
- 绝对定位不再占有原来位置（脱标）
盒子居中
top: 50%;
margin-top: 负的盒子本身高度的一半;
left: 50%;
margin-left: 负的盒子本身宽度的一半;
固定定位：fixed
使得元素固定在浏览器可视区的位置，使用场景：浏览器页面滚动时元素的位置不会变
- 以浏览器的可视区域为参照移动元素
- 不随滚动条滚动
- 不占有原先位置（脱标0）
子绝父相
子级是绝对定位的话，父级就要用相对定位
总结
定位叠放顺序
z-index参数可以调整叠放顺序
- 数值越大，盒子越靠上（不加单位）
- 只有定位的盒子才有
z-index属性
定位的特殊性
- 行内元素添加绝对或固定定位，可以直接设置高度和宽度
- 块级元素添加绝对或固定定位，不设置宽高，默认大小是内容的大小
- 脱标的盒子不会触发外边距合并
隐藏元素
display
一般使用display: none用来隐藏元素，和display: block来显示元素，不保留原来位置
visbility
使用visbility: hidden隐藏元素会保留原来的位置
overflow溢出
overflow: visible默认属性，显示溢出内容
overflow: hidden隐藏溢出
overflow: scroll滚动条一直存在
overflow: auto内容溢出才有滚动条