CSS布局

传统网页布局的三种方式

• 标准流/普通流/文档流（块级元素独占一行，从上往下排列，行内元素从左到右按顺序排列）
• 浮动
• 定位

多个块元素纵向排列用标准流，多个块元素横向排列用浮动

浮动

• 浮动元素会脱离标准流&浮动的盒子不再保留原先的位置
• 浮动元素会一行内显示并且元素顶部对齐
• 浮动的元素会具有行内块元素的特性

浮动特性（重难点）

• 如果块级元素没有设置宽度，默认宽度和父级一样，但是添加浮动之后，他的大小根据内容来决定
• 浮动的盒子中间没有缝隙，是紧紧挨在一起的
• 行内元素同理

浮动布局注意点

• 浮动和标准流的父盒子搭配（先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置）
• 一个元素浮动了，其余的兄弟元素也要浮动（浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流）

清除浮动

为什么要清除浮动

由于父级盒子很多情况不方便给高度，但是浮动的盒子不占用位置，最后父级高度为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内容溢出才有滚动条