果冻公开课第五课：五分钟理清盒模型的前世今生

在前端程序员眼中，页面其实可以被视为一个个盒子组成的

那么，这些盒子是如何构建起整个页面的呢？

动画视频：

如何理解盒子模型

文字解析：

在上一节里面

我们知道了文档流和网页中的DOM都可以看作是盒子

而无论是文档流还是网页状态，要把一些元素比如H1 H2 H3放到另外一个元素中

都需要他们属于这个元素的子节点，这个元素则是H1 H2 H3的父节点

这个父节点，它就像是一个打包盒，把它的子级元素打包到一起，然后作为一个整体来进行布局

这个打包盒我们通常会用哪个元素呢？

答案是DIV

虽然从理论上来讲大多数html元素都可以担任打包盒这个职责

但在不考虑语义的情况下，通常都会使用DIV

不过随着html的发展，大家逐渐觉得只有DIV还不够：

无法区分更多的语义

因此创造出了各种专有的打包盒：

如section article hgroup等等

由此我们可以知道DIV是盒子，而其他的元素也都是盒子

如果想要将盒子在一个二维的页面中陈列开

除了它们自身出现的顺序以外，还由5个基本属性来调节它们的位置和大小

这5个属性分别是：

宽 高 内边距 边框和外边距

宽和高 决定了盒子内部空间有多大

盒子装的内容都是放在这个区域当中

边框 就是盒子本身

可以修改盒子的厚度 材料以及颜色

内边距和外边距好比是给盒子内外添加的透明抗震材料

改变内边距可以改变内容与盒子之间的距离

改变外边距则可以改变盒子之间的距离，通过这些基本属性改变盒子的⼤小会影响到布局

⽽盒⼦⼤小的计算模型有两种

标准盒⼦模型和IE盒⼦模型

通过改变CSS属性box-sizing的值来改变

第⼀种标准盒⼦模型

box-sizing为content-box

这种行为模式下，盒⼦子的宽和⾼只决定元素的content内容部分

内边距padding和边框border是在content外部另外绘制

也就是说

width = content

第⼆种IE盒⼦模型

box-sizing为border-box

这种⾏为模式下，为盒⼦设定的宽和⾼决定了元素的边框border⼤小，

那么盒⼦的内边距padding和边框border都将在已设定好的宽⾼内绘制

也就是说

width = content + padding + border

因此如果为两个盒子设置同样的css属性

不同的盒模型将会占据不同的⻚面宽度

标准盒⼦模型下的盒⼦会这样计算:

width = content = 300px

然后再额外计算padding和border的值

因此盒⼦实际占据了了500px

IE盒⼦模型下的盒子则会这样计算

width = content + padding + border = content + 50px * 2 + 50px * 2 = 300px

不用额外计算padding和border的值

width 设置是多少，盒子就实际占据多少

不过通过减量计算得到盒子的content部分就只剩下100px了

在实际的开发中

为了在横向方向上尽量不出现滚动条

通常会希望盒⼦实际占据的宽度不超过⻚面宽度

标准盒⼦模型的解决⽅案是通过数学计算

设置宽度时需要⽤希望的宽度减去内边距和边框宽度

但这样开发起来实在太过复杂

幸好我们有IE盒子模型

内边距和边框不会再增加盒⼦宽度

有的开发者甚⾄会这样设置他们的CSS代码

以保证所有盒⼦的计算都统一而且简单直观

怎么样是不是很简单？

学会后赶紧上手写点代码练习一下吧。

————————————————

好了，今天的果冻公开课就先到这，咱们下期见啦~

★★★★★

这里是果冻公开课，一个用趣味的动画来分享IT知识的课堂

我们将原本复杂、不易理解的编程知识，转化为一个个有趣的动画短视频，为更多人提供生动有趣的IT内容/服务

无论是大咖还是小白，都可以快速学会并深度了解每一个知识点，让IT，Q弹可口。

更多内容，欢迎加大师姐微信it_xzy，入群717415872了解课程动态、幕后花絮，还有机会参与到课程制作，成为联合制作人

记得备注来自果冻课堂哟