共计 1301 个字符,预计需要花费 4 分钟才能阅读完成。
教你 5 分钟搞懂 css 外面的盒模型
什么是盒模型
在 html 中,咱们写的标签,很多都是有盒模型的,也就是在 css 外面,咱们为这些标签设置款式的时候,实际上就是为这些盒子设置款式。
可能这样不是很好了解,咱们来看一个例子:
在日常生活中,咱们常常应用一些盒子来装货色,此时咱们将盒子设想成从上往下看的二维立体:
那么盒子将会蕴含以下货色:
- 盒子外面装的货色【内容】
- 盒子内容与盒子包装的间隔【内边距】
- 盒子的厚度:【边框】
- 盒子间隔其余货色的间隔【外边距】
css 外面的盒模型就蕴含内容 content
, 内边距padding
, 边框border
, 外边距margin
如下图所示:
- 红色框框外面的就是内容
content
- 绿色箭头的间隔就是内边距
padding
- 再往外的彩色边框就是盒子的边框
border
- 最里面的的蓝色箭头就是外边距
margin
盒模型的分类
在现在 css 的规范外面,盒模型有两种,一种是规范盒模型,一种是 IE 盒模型。
css 默认应用的是 ie 盒模型,这就导致了一些初学者在设置 css 款式的时候呈现一些出其不意的问题。
至于是什么问题呢?
接着往下看。
ie 盒模型
首先咱们来讲讲 ie 盒模型是怎么样子的。
咱们在 ie 盒模型中,设置的宽度以及高度,只是蕴含了内容 content
的宽度以及高度,不蕴含内边距 padding
以及边框 border
的宽度以及高度。
.box{
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #000;
margin: 19px;
}
在浏览器开发者工具中,咱们能够看到,该盒子的内容内容长宽都为 100px, 然而盒子的理论长宽为 130px,这就是因为 ie 盒模型长宽只蕴含内容的长宽。
此时咱们设置的长宽度计算形式为:
width = content.width
height = content.height
这时候,问题就来了:
一些初学者明明只给盒子设置了 100px 的宽度,为什么盒子的理论宽度却是 130px 呢?
看来下面的例子,就很明了了,这就是 ie 盒子长宽不蕴含内边距以及边框的宽度导致的问题。
规范盒模型
规范盒模型,就是咱们常说的盒模型,它的长宽蕴含了内容 content
,内边距padding
,边框border
的宽度以及高度。
留神:
- 规范盒模型并不蕴含外边距
margin
的宽度以及高度。 - 在应用规范盒模型之前,咱们须要通过
box-sizing: border-box;
来设置盒模型的类型。
.borderBox {
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid #000;
margin: 19px;
}
在下面的图片咱们能够看到,盒子外面的内容显著比 ie 盒模型的内容要小,这是因为规范盒模型的长宽蕴含了内容 content
,内边距padding
,边框border
的宽度以及高度。
此时的咱们设置的长宽度计算形式为:width = content.width + padding.width + border.width
height = content.height + padding.height + border.height