盒模型概述

CSS中最重要的3个概念是浮动、定位和盒模型。这些概念决定了HTML文档中各个元素在页面哪里、如何显示，也就是页面布局了。下面我们来看看盒模型。

基本框

每个元素都会以一个矩形框显示在页面上。这个框由content-area、padding、border、margin组成。

盒模型示意图

每项值可以指定也可以不指定，还可以指定为auto。注意除了margin可以为负值外，其他值都不能为负值，border值还不能使用百分比。

包含块

每个元素都相对于其包含块摆放，包含块就是对应元素的“布局上下文”，简单来说，一个元素的包含块就是这个元素的父级元素的content-area。

一些基本名词及概念

基本流

指从上到下、从左到右显示元素；注意在非西方语言中，流向可能不同。大部分元素都处在正常流中，要让一个元素脱离正常流，则必须让其成为float或者position元素。

根元素

对于html文档，根元素指的是html元素。
对于xml文档，根元素可以是该语言允许的任何元素。

非替换元素

如果该元素的内容包含在文档中，则为非替换元素。大部分元素都是非替换元素。

替换元素

如果该元素只是作为一个占位符，其内容并没有直接包含在文档中，则为替换元素。如img元素，另外大部分表单元素也是替换元素，如input。

块级元素

display：block；可以将一个元素显示声明为块级元素。

块级元素独占一行。

行框的高度由块级元素的
height + padding-top + padding-bottom + border-top-width + border-bottom-width 值确定；如果height未定义，则height由其内容确定。（margin和width可以为auto，注意margin为auto时会自动设置为0.）

行框的宽度由块级元素的
width + padding-left + padding-right + border-left-width + border-right-width
值确定；如果width为定义，则
width + padding-left + padding-right + border-left-width + border-right-width = 包含块的width。（具体细则自己尝试即可，注意：只有margin和width可以为auto，其他要么是0，要么必须是具体value。）

注意：元素的内容是可以超出元素的框的，但是只能从下方和右方超出。

百分数

width，height设置为百分数时，是相对于其包含块的width和height。
margin、padding设置为百分数，是相对于其包含块的width。
注意，border-width不能设置为百分数

替换元素

基本和block元素一样，只有一点：当width为auto时，替换元素的width会是其替换内容的本身width。注意，如果只指定一个值（width或者height）替换元素的width、height会成比例的变化，除非两者同时指定。

margin为负值

会改变元素相对于其包含块的位置，因为是负值，效果和正值相反而已。

外边距合并

合并只会发生在垂直方向上，当两个元素（不论兄弟还是父子，也不论外边距是否为0。）的外边距相遇时，外边就会发生合并，会取其中的一个较大值作为合并后的外边距。

行内元素

注意这里指的是行内非替换元素

display：inline，可以将一个元素显示声明为行内元素。行内元素是块级元素的后代，不会独占一行。

除了不会独占一行外，行内元素和块级元素的最大区别是：块级元素由其本身的盒模型确定其基本布局；行内元素则不同，垂直方向上通过padding、margin设置的盒模型会生效（背景可以看出），但是不会影响到行内元素的基本布局。

行内元素的布局是这样的：每个行内元素会生成一个属于自己的行内框（可以由line-height指定，否则则和其内容相关。），同一行中的所有行内框共同决定一个行框，高度为最高行内框的顶部到最低行内框的底部。这个行框决定了本行行内元素的基本布局（行框的最大宽度为其包含块的content-area的width。）

行内元素的content-area的width、height值无法指定（设置了也无效），只能由其内容决定。

行内框高度的具体确定原则：line-height - 行内元素的content-area的height = 行间距。在行内元素的content-area区域的上下两端 + 行间距/2的值，得到的上下两个值即为行内框的高度。由此可知，为什么行内元素在行内框中总是垂直居中的了。

行内框的宽度为 行内元素的content-area的width + padding-left + padding-right + border-left + border-right；和块级元素基本一样。

IE盒模型

相比于W3C标准盒模型，IE盒模型更符号生活常理，其width不是content-area的值，而是conten-area的宽度 + 内边距 + 边框的值。

IE盒模型

在最新的CSS3中，增加了一个新属性：box-sizing，可以显示声明采用哪种盒模型。默认的依然是W3C标准盒模型。

box-sizing: content-box; 采用W3C标准盒模型
box-sizing: border-box; 采用IE盒模型