盒子模型浅谈

1.什么是盒子模型

CSS盒子模型（Box model）就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒模型就是对这些元素的形状进行一个抽象 ，会把每个元素都渲染成一个矩形的盒子。网页中所有元素都具备以下四个属性：

内容(content)，也就是元素的 width、height
内边距(padding)
边框(border)
外边距(margin)
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。

盒子模型能够为我们解决什么问题

盒子模型主要是针对页面布局的时候来使用，它规范我们的页面的所有元素的一个布局标准是由外向内进行布局。

盒子模型由外向内：margin(外边距)—>border(边框)---->padding(内边距)---->content(元素)

上面所说的盒子模型是基于W3C标准的盒子模型，大多数浏览器都采用标准盒模型。而还有一种怪异盒子模型，这种怪异模式主要表现在IE内核的浏览器。

标准盒子模型和怪异盒子模型（IE盒子模型）

在标准模式下，一个块的总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)

在怪异模式下，一个块的总宽度 = 内容的width + margin(左右)（这里的width包含了padding(左右)和border(左右)的值）

标准盒模型和怪异盒模型有什么区别?

width 属性所包含的大小不同
标准盒模型的计算方式是：
width = content(内容)
IE盒模型是：
width = 2 * border(边框) + 2 * padding(填充) + content(内容)
IE盒模型的width属性包括两倍的宽和两倍的边框再加上内容区域的宽度，标准盒模型width就是等于内容区域的宽度，padding和border属性依次撑开。两者的height属性同理可得.

如何触发两种盒模型：

如果是定义了完整的doctype的标准文档类型，无论是哪种模型情况，最终都会触发标准模式，如果doctype协议缺失，会由浏览器自己界定，在IE浏览器中IE9以下（IE6.IE7.IE8）的版本触发怪异模式，其他浏览器中会默认为W3c标准模式。除了上述还可以通过box-sizing来设置盒模型

box-sizing的应用

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。（个人认为可以理解为指定盒模型的类型，即上述两种类型）

box-sizing值为content-box时：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。将采用标准模式解析计算，也是默认模式（即 标准盒模型）
box-sizing值为border-box时：为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 将采用怪异模式解析计算（即 怪异盒模型）
box-sizing值为inherit时：规定应从父元素继承 box-sizing 属性的值
box-sizing值为padding-box：将padding算入width范围

应用场景

案例：table表格中 合并边框的写法
table {border-collapse：collapse}
案例：圆角边框（css3）
border-radius：5px；（4个角都是5px，最大是变成一个圆）
b、padding（内边距）
padding：1px 2px 3px 4px; (上 右 下 左)

在使用盒模型遇到什么问题?

例如 双边距
解决方法:将他设置成行内元素，display：inline就能解决该问题