CSS布局基础（传统布局小结）

传统布局方式

传统布局采用 标准流 + 浮动流 + 定位的方式实现布局效果，也就是通常所说的 DIV + CSS 布局。

标准流

标准流中的元素在 页面默认的 维度，块级元素独占一行；行内元素共享一行，且不能设置宽高；行内块共享一行，可以设置宽高。
常用于 普通排列，即盒子上下排列

浮动流

使用 float 将盒子浮动起来，使块级元素呈现出 行内块的特征。
常用于 水平排列，即盒子水平排列

定位

以上两种布局方式只能实现大范围内的布局，很难处理一些小范围内的精准布局，定位就可以实现精确移动元素。
常用于 自由移动，覆盖在盒子上面的效果，侧边栏，广告等
注意，定位浮动高于 原生的浮动；并且可能出现重叠，此时可以使用 z-index 指定层叠顺序，值越大越靠近屏幕，可以想象为垂直屏幕向外的一个 Z 轴

伪类元素CSS应用对象

应用到自身

伪类元素最常用是给自身加上特定的CSS样式，如下：鼠标悬浮时，将a标签的字体设置为 18px

a:hover{font-size: 18px;
}

应用到其他元素

有时候，需要由 一个 元素的伪类触发 样式应用到另一个元素上，直接在伪类选择器后面 写上 要应用的相对（建立目标元素与伪元素的关联）选择器即可。如下，当鼠标悬浮div标签时，将div后代 id 为 target 的元素的字体设置为 18px

div:hover #target{font-size: 18px;
}