CSS布局的那些事儿

　　所有CSS布局都依赖于三个基本概念：定位、浮动和空白边操作。不同的技术其实没有本质的区别，而且如果理解了核心概念，那么创建自己的布局是相当容易的。

　　本文主要是总结实际中使用的CSS布局技巧，从简单布局到高级布局。本文分享的布局只是基于XHTML1.0-transitional，可工作在各大主流浏览器中，对有浏览器差异性的技巧在此不作分享。

1.  文档流：

1.1  文档流也称普通流。

1.2  文档流将窗体自上而下分成一行行，并在每行中按照从左至右的顺序排放元素。

1.3  有三种情况将使得元素脱离文档流而存在，分别是浮动、绝对定位、固定定位。

1.4  脱离文档流的元素不占任何正常文档流空间，并且叠放层次高于正常文档流。

2.  Display:none|block|inline|inline-block

2.1  none：不显示，并且释放布局资源。与display:none不同，visibility:hidden不显示，也不释放布局资源。

2.2  block：块级元素，默认占满一行（换行），元素的内容呈现盒子模型，会发生边距合并，会发生边距合并。代表元素：DIV。

2.3  inline：内联元素，也叫行内元素，显示在一行内（不换行），元素的内容丢失盒子模型，水平方向margin和padding可用。最常用的是和文字并排。代表元素：SPAN。

2.4  inline-block：行内块级元素，对象呈递为内联元素，但是对象的内容作为快对象呈递，代表元素：IMG。此属性在IE8中才得到实现，因此不建议在布局中使用，淡此属性可触发元素拥有布局。

3.  CSS盒子模型

　　3.1  CSS盒子模型具备这些属性：content、padding、border、margin。

　　3.2  margin：边界，也叫外边距，可以使负值。无色、透明。

　　　　3.2.1  margin可控制文档流中块级元素的水平对齐方式。

　　　　3.2.2  margin:0 auto;居中。

　　　　3.2.3  margin:0 0 0 auto;居右。

　　3.3  border：边框。

　　3.4  padding：填充，也叫内边距，不可以是负值。

　　3.5  content：内容，width和height属性控制此区域的大小。

　　3.6  元素的背景从padding区开始填充。

4.  边距合并

     4.1  文档流中的非浮动块级元素才会发生边距合并。

     4.2  边距合并只发生在相邻的垂直外边距上。

　　　　4.2.1  同级元素的相邻的垂直边距会发生合并。

　　　　4.2.2  子元素与父元素的相邻的垂直边距也会发生合并。注意：IE的haslayout和标准的Block Formatting Context不会发生合并，因为自身的特性。

　　　　4.2.3  空元素的上下边距也会发生合并，只要上下边距是相邻的，比如空段落。

     4.3  边距合并是有意义的，边距合并可以让你不用把第一个获最后一个元素的边距单独处理。比如段落p的边距合并。

     4.4  边距合并的公式是：异号相加，同好取绝对值大者。

5.  float:none|left|right

     5.1  left：脱离文档流，向左浮动。

     5.2  right：脱离文档流，向右浮动。

     5.3  元素在浮动后会具有收缩特性，块级元素不再占满一行，而是尽可能的收缩到最小。

     5.4  浮动元素自动转化为块级元素并且触发元素拥有布局。

     5.5  浮动元素会脱离正常文档流，释放原先占有的位置，形成腾空浮动效果，后来的块级元素会占用浮动元素原来的位置。

     5.6  浮动元素会在水平方向填充容器，如果放不下，会自动换行。

     5.7  清除浮动

　　　　5.7.1  浮动元素因为释放了原来的位置，所以不会把容器撑开。

　　　　5.7.2  清除浮动最大的目的是把容器撑开，当然你也可以有别的目的。

　　　　5.7.3  清除浮动有很多方法，各有利弊。

　　　　　　5.7.3.1  常用的是设置容器的overflow:hidden|auto。

　　　　　　5.7.3.2  利用空节点通过clear:left|right|both清除浮动。

　　　　　　5.7.3.3  通过html属性clear清除浮动。

　　　　　　5.7.3.4  利用伪元素:after清除浮动。

　　　　　　5.7.3.5  ……

6.  haslayout：拥有布局

　　6.1  拥有布局是IE浏览器（IE6，IE7）特有的。

　　6.2  haslayout是IE渲染引擎的一个内部组成部分。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么以来与父元素来计算尺寸和组织内容。为了调节者两个不同的概念，渲染引擎采用了haslayout的属性，属性值可以为true或false，当一个元素的haslayout属性值为true时，我们说这个元素有一个布局（haslayout）。

　　6.3  haslayout在布局中有什么作用

　　　　6.3.1  大部分的IE显示错误，都可以通过激发元素的haslayout属性来修正。

　　　　6.3.2  当元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。

　　6.4  CSS很多属性可以出发元素haslayout，详细列表可参见百度百科：http://baike.baidu.com/view/2945869.htm

　　6.5  想要更好的理解CSS，尤其是IE下对CSS的渲染，haslayout是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误，就是源于对haslayout的不了解。

　　6.6  haslayout的主要作用

　　　　6.6.1  可以阻止边距合并。

　　　　6.6.2  可以包含内部元素的浮动。

　　　　6.6.3  可以阻止元素被浮动覆盖。

7.  Block Formatting Context：块级格式化范围

　　7.1  什么是Block Formatting Context

　　　　7.1.1  当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。

　　　　7.1.2  一个环境中的元素不会影响到其它环境中的布局。

　　　　7.1.3  Block Formatting Context的作用。

　　　　　　7.1.3.1  可以阻止边距合并。

　　　　　　7.1.3.2  可以包含内部元素的浮动。

　　　　　　7.1.3.3  可以阻止元素被浮动覆盖。

8.  position:static|relative|absolute|fixed

　　8.1  static：所有元素的默认的定位方式，基于文档流定位，也可以理解为流式布局。后来的元素叠放层次更高，z-index属性对它是无意义的，坐标定位对它也是无意义的。

　　8.2  relative：相对定位，不脱离文档流。坐标定位时，坐标系是父元素，坐标是相对自己原位置，同坐标位置可重叠，z-index属性可设置重叠层次。

　　8.3  absolute：绝对定位。

　　　　8.3.1  绝对定位，脱离文档流。

　　　　8.3.2  非坐标定位时，父亲元素只决定元素默认位置，可通过margin来相对父亲元素定位。

　　　　8.3.3  坐标定位时，依据坐标系来定位，该元素的坐标系是指：DOM树种从该元素向上查找第一个已定位（非static）的祖先元素，如果没有这样的祖先元素，就参照HTML定义（注意不是BODY）。

　　　　8.3.4  同一坐标系下的元素，位置可重叠，z-index属性可设置重叠层次。

　　8.4  fixed：固定地位，脱离文档流，相对于浏览器窗口定位。元素在文档滚动时不会移动。此属性IE6不支持，IE6中一般用absolute代替。

9.  z-index：auto|number

　　9.1  auto：叠放层次和父元素相同，严格来说是和坐标系相同。

　　9.2  number：手动设定值。

　　9.3  z-index属性只对已定位元素有效。

　　9.4  坐标系相同的元素叠放层次的控制是简单的，z-index越大，叠放层次越高。

　　9.5  坐标系不同的元素叠放层次的控制是复杂的，不同浏览器的理解也不相同，最终层次，除了受z-index影响，还受坐标系影响。

10.  CSS高级定位

　　10.1  CSS高级定位是通过把static、relative与absolute、fixed同时使用来实现的。

　　10.2  static元素包裹absolute元素，static元素“漂流”到文档大概位置，absolute通过margin实现局部偏移。

　　10.3  relative元素中放置absolute元素，relative元素“漂流”到文档大概位置，absolute通过坐标定位实现局部偏移。