盒模型概念
- 网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
- 这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。
- CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
以上的概念出自百度百科。要清晰快捷的理解盒模型概念以及上文中的属性名和含义，我们不妨来想象着自己面前有一个纸盒子。
纸盒
我们先来将我们可爱的盒子放到桌子上，那么盒子到桌子边缘的距离我们可以理解为边距，就是为所谓的margin。边距为零的时候就意味着盒子边和桌子边重叠。我们可以通过给盒子设置margin-top来让我们的盒子离开桌子上边缘，同样的还有margin-left、margin-right、margin-bottom几种方式让忙碌的纸盒离开其他边缘，这种情况是嵌套。并列情况下道理也一样。
现在我们已经可以利用margin属性让我们的纸盒在桌子上跑来跑去了。接下来先不考虑我们的盒子对这种忙碌的抱怨；我们看下我们盒子内部，正好我们手上有一个性感的早乙女玛丽亚手办，并且价值不菲我们需要这个盒子来盛放我们的手办宝贝儿。为了我们的早乙女玛丽亚安全我们会同时放一些棉花海绵之类的填充物作为缓冲，防止我们的宝贝儿受到伤害。填充物的存在会让我们的宝贝儿和盒子的边产生一点距离，这个距离就是padding。仔细观赏之后突然发现我们的早乙女玛丽亚的头部离盒子有点近了，不是很安全。再塞点海绵进去以此来增加她头部和盒子的距离，这个就是padding-top。同样的还有padding-left、padding-right、padding-bottom可以操作。
早乙女玛丽亚手办
在刚才的情况下我们设置属性width和height，就是将早乙女玛丽亚的高低胖瘦进行调整。而早乙女玛丽亚本身就是content。剩下最后一个border的概念了，这个很好理解，就是盒子的壁。我们从上方鸟瞰盒子，盒子的厚薄颜色等呈现出来的效果就是通过设置border来实现的。例如borde-bottom-color来设置下边框的颜色。border可以通过简写的方式来节省代码提高效率。以后我会专门写CSS简写方面的文章来详细阐述。
到这里整个盒模型已经通过方便自己理解并能牢记的方式吸收完毕，剩下的就是实践操作、经验积累和模型修正了了；我个人把这个过程叫“知识本地化”。有了上面的概念作为平台就能再前进一步，可以开始进行“知识的挖掘和过滤”。学习知识要知其然还要知其所以然，不然就只能是知识的搬运工了。我们要做知识的生产者，就需要进一步的去了解知识。
不一样的盒模型
盒模型的出现彻底终结了用表格制作网站的历史，当然表格table并没有完全退出舞台，它的功能特性是其他标签替代不了的，而且它还有一个十分重要的设计思想成功解决了前端发展中的一块绊脚石，后面我也会专门写文章来介绍这种思想。
第一part里面介绍的盒模型概念是W3C的标准盒模型。
标准盒模型
标准盒模型中content的大小就是width和height设置的值。content实际占用的空间其实是padding+border+margin+width。举个栗子来说明下。一个div的width是20px、padding-left是1px、padding-right是2px、border-left是3px、border-right是4px、margin-left是5px、margin-right是6px。那么整个div在页面中占用的宽度就是20+1+2+3+4+5+6=41px。
除了标准盒模型还有一个叫做怪异盒模型的东东，似乎是叫这个名字吧，叫什么并不重要，重要的是它本质是啥东西。PS：其实我更喜欢叫它IE盒模型。
IE盒模型
通过图片其实就能一眼看出来IE盒模型和标准盒模型的区别了。在IE盒模型中所设置的width和height就是包含了padding和border，整个元素在页面中实际占用的空间只需要加上margin就行了。重点就是设置了width和height之后在去设置padding和border，那么前者是已经包含了后者的长度的。在这种模式下你的width和height已经设置固定了而且并且还被padding和border掠夺走了一部分，剩下的才是内容真正呈现的地方。根据相对论的思想来也可以理解为，最真实content的呈现效果变小了。
两种盒模型各有优劣，我个人认为还是IE盒模型更加贴近真实世界一点。在设计工作中IE盒模型也更能精确的控制元素。想想第一part中的例子就能理解了，盒子的长度是不会变的，填充和边框都是长度中的一部分。想把东西放进去有填充物措施的盒子，只能将物品缩小一些。而不是标准盒模型那种的将盒子拆解了添点料把盒子改大一点。
问题来了~！是什么因素让浏览器决定使用哪一种盒模型来渲染页面呢？
文档声明DOCTYPE
随便打开一个网页查看源码都能看到在文章的头部第一行代码：
<!--HTML5中的文档类型声明-->
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
这个就是文档类型声明(上面的代码是html5的文档声明格式)，只要这行代码存在浏览器看到它后用W3C标准来标准盒模型渲染页面；如果没有这行代码，各个浏览器会按照自己的标准去使用不同的盒模型渲染。比如在没有声明文档类型的时候，FF(Firefox)浏览器会用W3C标准盒模型来渲染，而IE会用IE盒模型来渲染。如此一来同一个页面在不同的浏览器就会呈现不同的效果，这不是我们所希望看到的。
通过文档声明来选择渲染方式可以实现目的，但是很被动。各个浏览器默认执行的盒模型还都不一样，结果也会是一团糟，那么有没有更好的办法来自由切换呢？答案是肯定的。
box-sizing
box-sizing是CSS3中出现的新东西。它的定义是允许以特定的方式定义匹配某个区域的特定元素。我们先来看看各个浏览器厂商对它的支持情况。
box-sizing
哦耶~! 绿化花的一大片，全部都支持。不过再回过头去看定义，发现这个东西和上面说的盒模型没有半毛钱的关系。先别急~! 凡是属性肯定都会有值的。我们慢慢来！
先看看box-sizing的语法，了解下这个属性都有什么值以及值的描述。
box-sizing: content-box|border-box|inherit;
| 值 | 描述 |
|---|---|
| content-box | 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 |
| border-box | 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
看完之后，直接豁然开朗了。box-sizing: content-box;看着不就是W3C的标准盒模型的计算方式么？而box-sizing: border-box;就是IE盒模型的计算方式。还真是方便啊，想改变元素的盒模型计算方式直接一条CSS语句直接就能实现了，真实想吃馍就吃，想扒米饭就扒米饭啊。更多的自由选择，能再一个页面上同时出现两种盒模型的计算方式，很是神奇不是嘛？下面做了个demo来展示一下，直观的去看图片的话发现差别还真不是一般的大啊。
box-sizeing-example
box-sizing简单的介绍到这里算是告一段落了，上图只是demo的截图，如果想要看具体的代码，自己敲代码吧，我也没办法。自己的博客关了，所以才转移到这里的，以前的DEMO页面都没了~
感觉自己萌萌哒
-全文完-
网友评论