CSS3盒模型——box-sizing

box-sizing盒模型是CSS3的一个重要属性之一，常常被很多人给忽略了！CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高，css3之后可以用box-sizing来指定宽高。

目前比较火的前端框架Bootstrap,Foundation等国外框架都是全局设置box-sizing:border-box，如果您不再支持低版本浏览器，这个属性对您来说将会相当好用，相信你会爱上他的！

语法：

box-sizing: content-box|border-box|inherit;

content-box：这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box:为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit:规定应从父元素继承 box-sizing 属性的值。

提示：IE8以下的浏览器支持content-box,不支持border-box,border-box是CSS3新增加属性！

content-box示例：

.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }

border-box示例：

.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

注意：看图可以清楚看到它们的，属性为content-box时宽为：250，属性为border-box时宽为：200

顺便又温习了一下css的盒模型，最后觉得有必要对盒模型做一个全面整理。

先不考虑css3的情况，盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。

当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!DOCTYPE HTML>

以上几种DOCTYPE都是标准的文档类型，无论使用哪种模式完整定义DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。

首先定义一个div块用来演示标准模式和怪异模式的区别，以下是Css样式

.box {

    width: 200px;

    height: 200px;

    border: 20px solid black;

    padding: 50px;

    margin: 50px;

}

在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin

标准模式盒模型

在怪异模式下的盒模型如下图所示，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

怪异模式盒模型

看到这里你应该对盒模型的两种模式有了清晰的认识，下面在此基础上介绍一下css3属性box-sizing;

box-sizing有两个值一个是content-box，另一个是border-box。

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

目前使用此属性需要前缀如下:

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

本条目发布于2013年6月4日。属于CSS3分类，被贴了 -moz-、-webkit-、盒模型、页面布局标签。