第二章 css选择器和良好的结构体( 二 ) _css选择器

通用的解决方案
这里只说一种简单的方法，还有其他方法可以自行谷歌（涉及了css2.1中的BFC规范等问题）
外边距叠加带来的意义
简单来说就是形成上下段落的等距分配布局，还是看图来的直接，上图！

文章插图
二、布局方式
这里开始会正式开始讲解布局，因为是按照原作学习时的顺序走的，我们先来接触定位。
tips:定位虽然是最直接最有效的布局方式，但是这里我认为千万不要大量使用，定位的滥用应该会降低网页的性能。（我之前某处看到的…）
1. css中的三种定位机制
1. 普通流
2. 浮动流
3. 定位流
定位流又可以分为
绝对定位（）相对定位（）固定定位（fixed）
先来了解一个概念——“文档流模型”
默认情况下：你所构造的所有元素都是在二维平面上的，它们在一个面上，没有高低之分，属于一个维度。而当你使用了浮动流布局，定位流布局后，情况就会不一样了。这个时候会多一个维度，高度。也就是说它们会有高低之分，可以高的覆盖低的。从屏幕上看就是在原先的x、y轴上，多了一个z轴。z轴是指向程序员的。假设默认文档流在z轴的0点处，那么浮动的元素就会在1这个位置，定位的元素就会在2（这只是为了说明定位元素一般情况下高于浮动元素而假设的两个相对数值）。而它们的子元素会和它们高度平级，也就是被父元素拖起来，实际高度以父元素为基准。而因为实际的网络布局中情况远比现在所设想的复杂，所以会有一个z-index属性来控制相同的定位机制产生的高度一样的问题。
当然上面的说法只适合初步理解，具体的可以看第八章。
z-index区间是[-,] 。xxx是因为不同浏览器的具体数值是不一样的。结合一张图片理解下文档流模型。
1.定位流 1. 绝对定位：规则：以自己嵌套关系最少的父级（祖辈级）为参考点进行定位。条件：元素本身是绝对定位（），父级或祖辈级元素是定位流（任意一种定位都可以）。效果：脱离默认文档流，同层的定位元素可以横向排列，不再独占一行，并且不会发生叠加问题。2. 相对定位：规则：以自身现在的位置为参考点进行定位（）。条件：设置相对定位。效果：脱离默认文档流，自己原先的位置仍然被“占有” ，相当于人过来了，影子留那里占着位置…不再独占一行，并且如果不设置位置信息，就会原地浮起，位置不变。（这个特性在一些情况下十分好用） 3. 固定定位：规则：以浏览器可视窗口为参考进行定位（fixed）。条件：设置fixed（ie6下无效）。效果：因为相对于浏览器窗口定位，所以浏览时位置相对不会改变。
就像我所知道的，大量的定位流布局对性能会有影响，所以还有一种布局可以满足日常需要。
2.浮动流条件：设置元素浮动。效果：脱离默认文档流，可以横向排版。问题：
引起父级容器高度塌陷默认比定位流高度低，可能被无意中遮挡住想显示的效果。解决方案：
如果被定位流挡住的话，可是使用z-index去调整层级关系父级容器高度塌陷，见下表。清除浮动手段引起的新问题推荐指数