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通过坐标定位实现局部偏移。