盒模型概念
网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，
CSS盒子模式都具备这些属性。*CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
盒模型的出现彻底终结了用表格制作网站的历史，当然表格table并没有完全退出舞台，它的功能特性是其他标签替代不了的，而且它还有一个十分重要的设计思想成功解决了前端发展中的一块绊脚石，后面我也会专门写文章来介绍这种思想。
1. 第一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=31px。
除了标准盒模型还有一个叫做怪异盒模型的东东，似乎是叫这个名字吧，叫什么并不重要，重要的是它本质是啥东西。PS：其实我更喜欢叫它IE盒模型。
IE盒模型
通过图片其实就能一眼看出来IE盒模型和标准盒模型的区别了。在IE盒模型中所设置的width和height就是包含了padding和border，整个元素在页面中实际占用的空间只需要加上margin就行了。重点就是设置了width和height之后在去设置padding和border，那么前者是已经包含了后者的长度的。在这种模式下你的width和height已经设置固定了而且并且还被padding和border掠夺走了一部分，剩下的才是内容真正呈现的地方。根据相对论的思想来也可以理解为，最真实content的呈现效果变小了。
两种盒模型各有优劣，我个人认为还是IE盒模型更加贴近真实世界一点。在设计工作中IE盒模型也更能精确的控制元素。想想第一part中的例子就能理解了，盒子的长度是不会变的，填充和边框都是长度中的一部分。想把东西放进去有填充物措施的盒子，只能将物品缩小一些。而不是标准盒模型那种的将盒子拆解了添点料把盒子改大一点。
问题来了~！是什么因素让浏览器决定使用哪一种盒模型来渲染页面呢？
文档声明DOCTYPE
随便打开一个网页查看源码都能看到在文章的头部第一行代码：
<!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
作者：培佑哥
链接：https://www.jianshu.com/p/51e5bb7e9fa2
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
1000
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
