对盒子模型的理解
一、是什么
1、当对一个文档进行 布局(layout)
的时候,浏览器的渲染引擎会根据标准之一的 CSS
基础框盒模型(CSS basic box model),将所有元素表示为一个个矩形的盒子(box)。
说明:
CSS
指 层叠样式表 (Cascading Style Sheets)
,使用 CSS
就可以完全控制浏览器如何显示 HTML
元素,从而充分展示自己喜欢的设计样式
2、一个盒子由四个部分组成: content
、 padding
、 border
、 margin
(1)
content
,即实际内容,显示文本和图像
(2)boreder
,即边框,围绕元素内容的内边距的一条或多条线,由粗细、样式、颜色三部分组成
(3)padding
,即内边距,清除内容周围的区域,内边距是透明的,取值不能为负,受盒子的background
属性影响
(4)margin
,即外边距,在元素外创建额外的空白,空白通常指不能放其他元素的区域
3、上述是一个从 二维
的角度观察盒子,下面再看看看 三维图
:
4、下面来段代码:
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
}
</style>
<div class="box">
盒子模型
</div>
5、当我们在浏览器查看元素时,发现元素的大小 width
变成了 240px
这是因为,在 CSS
中,盒子模型可以分成:
-
(1)
W3C 标准盒子模型
-
(2)
IE 怪异盒子模型
说明:
默认情况下,盒子模型为 W3C 标准盒子模型
二、标准盒子模型
1、标准盒子模型
,是浏览器默认的盒子模型
下面看看标准盒子模型的模型图:
2、从上图可以看到:
- (1)
盒子总宽度
=width
+padding
+border
+margin
- (2)
盒子总高度
=height
+padding
+border
+margin
也就是,width / height
只是内容高度,不包含 padding
和 border
值
3、所以上面问题中,设置 width
为 200px
,但由于存在 padding
,但实际上盒子的宽度有 240px
三、IE 怪异盒子模型
1、同样看看 IE 怪异盒子模型
的模型图:
2、从上图可以看到:
- (1)
盒子总宽度
=width
+margin
- (2)
盒子总高度
=height
+margin
3、也就是,width / height
包含了 padding
和 border
值
四、box-sizing
1、 CSS
中的 box-sizing
属性定义了引擎应该如何计算一个元素的 总宽度
和 总高度
2、语法:
box-sizing: content-box|border-box|inherit;
- (1)
content-box
:默认值,元素的width / height
不包含padding
、border
,与标准盒子模型
表现一致 - (2)
border-box
元素的width / height
包含padding
,border
,与怪异盒子模型
表现一致 - (3)
inherit
指定box-sizing
属性的值,应该从父元素继承
3、回到上面的例子里,设置盒子为 border-box
模型:
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
box-sizing: border-box;
}
</style>
<div class="box">
盒子模型
</div>
4、这时候,设置 box-sizing: border-box
, 与 怪异盒子模型
表现一致,可以发现盒子的所占据的宽度为 200px
参考文献
- (1)https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
- (2)https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing