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

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

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

动画视频：

https://v.qq.com/x/page/j0839rssr9f.html

如何理解盒模型？

 

文字解析：

在上一节里面

我们知道了文档流和网页中的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代码

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

 

 

怎么样是不是很简单？

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

 

 

标签：盒子,模型,第五课,果冻,content,公开课,内边,边框,border
来源： https://blog.csdn.net/jnshu_it/article/details/87775042