CSS 布局
CSS 规定的定位机制有三种，分别是标准文档流、浮动及绝对定位。
标准文档流
特点：
- 从上到下，从左到右，输出文档内容；
- 由块级元素和行级元素组成；
块级元素：特点：从左到右撑满页面，独占一行；触碰到页面边缘时会自动换行。
常见：div、ul、li、dl、dt、p ...
行级元素：特点：能在同一行显示，不会改变 HTML 文档结构。
常见：span、strong、img、input ...
块级元素和行级元素都是盒子模型。
盒子模型 = 网页布局的基石，由4部分组成：
- 边框：border
- 外边距：margin
- 内边距：padding
- 盒子中的内容：content
border、margin、padding 是盒子模型的属性值，可以整体设置属性值，也可以在某一方向（top、right、bottom、left）上设置属性值。
整体设置的话，属性的参数可以是3个、2个、或1个。
- 3个参数：第一个表示上，第二个表示左右，第三个表示下；
- 2个参数：第一个表示上下，第二个表示左右；
- 1个参数：表示四个方向上的属性值。
盒子3D模型
让我们利用背景美化网页时变得十分容易。
盒子模型尺寸 = 边框 + 外边距 + 内边距 + 盒子中的内容尺寸
自动居中一列布局
三个技能点：标准文档流、块级元素、margin属性
自动居中：
#wrap{ width:700px; margin:0 auto; }
此处 auto 会根据浏览器的宽度自动设置两边的外边距。
原理：（浏览器的宽度 - 外包含层的宽度）/ 2 = 外边距
注意：如果想让页面自动居中，当设置 margin 属性为 auto 时，就不能同时再设置浮动或绝对定位属性。 还有，width 一定不能设置为 100% 。
浮动布局简介及 float 属性
我们知道，在标准文档流中，用来布局的块级元素，它们是依次从上到下纵向排列的，如果要使用块级元素实现横向的排列的布局，那又该如何处理呢？
运用浮动机制，可以实现块级元素横向排版，可以实现横向多列布局。
float 属性：
- left——左浮动
- right——右浮动
- none——不浮动
特点：元素会左移或右移，直至碰到容器位置。
这个过程就好像在容器的左边缘或右边缘安装了一块磁铁，而设置了 float 属性就好像受到强大吸引力，要排除万难向磁石靠拢的铁块。
注意：设置了浮动的元素，仍旧处于标准文档流中，这就意味着它在标准文档流中会占据空间，对它周围的元素会产生影响，一般是指紧邻在它后面的元素。
注意，如果设置了 float 属性的标签体中没有内容，又没有设置宽度，那么它在浏览器的显示中会缩成一个点。
清除浮动常用的方法（用在受浮动影响的元素里）：
- 为元素设置 clear 属性，常用 clear:both，如果清楚浮动方向，也可以用clear:left，clear:right 。
- 同时为元素设置宽度为 100% （或者是固定宽度） + overflow:hidden 。
注意，清除浮动是用在受到浮动影响的标签，而不是设置了 float 属性的标签。
空标签无意义，不建议使用此方法清除浮动。
横向两列布局
主要应用技能：
- float属性——使纵向排列的块级元素，横向排列
- margin属性——设置两列之间的间距
注意，当父包含块缩成一条时，用 clear:both 方法清除浮动无效，它一般用于紧邻后面的元素的清除浮动。这种情况下使用 overflow:hidden 。
另外，在网页布局中，div 块的高度一般不需要设置，直接让他根据内容自动扩展就好。
绝对定位布局
通过设置 position 属性实现，能够实现横向多列布局及较为复杂的定位 。
position 属性有三种定位i形式：
- 静态定位
- 相对定位
- 绝对定位
可设置4个属性值：
- static （静态定位）
- relative（相对定位）
- absolute（绝对定位）
- fixed（固定定位，fixed也属于绝对定位）
相对定位
特点：
- 相对自身原有位置进行偏移；
- 仍处于标准文档流中；
- 一旦元素设置了相对定位，它随即拥有偏移属性和 z-index 属性（Z轴）
设置了相对定位，并设置了偏移量后，会产生层堆叠，并且仍会占据空间。
绝对定位
特点：
- 建立了以包含块为基准的定位；
- 完全脱离了标准文档流（意味着他对他的兄弟元素不再造成任何影响）；
- 随即拥有偏移属性和z-index属性。
1、未设置偏移量
特点：
- 无论是否存在已定位祖先元素，都保持在元素初始位置
- 脱离标准文档流
2、设置偏移量
偏移参照基准：
- 无已定位祖先元素，则以<html>为便宜参照基准；注意，是相对于html，而不是相对于body；
- 有已定位祖先元素，则以距其最近的已定位的祖先元素为便宜参照基准。
注意，当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。
