果冻公开课第五课：五分钟理清盒模型的前世今生
在前端程序员眼中，页面其实可以被视为一个个盒子组成的
那么，这些盒子是如何构建起整个页面的呢？
动画视频：
如何理解盒模型？
文字解析：
在上一节里面
我们知道了文档流和网页中的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代码
以保证所有盒⼦的计算都统一而且简单直观
怎么样是不是很简单？
学会后赶紧上手写点代码练习一下吧。
更多内容，欢迎加大师姐微信：
入群了解课程动态、幕后花絮，还有机会参与到课程制作，成为联合制作人哟
记得备注来自果冻课堂