Duang Duang Duang!!!
小伙伴们校招面试的时候是不是经常被面试官问这样的问题:能说说你了解的盒子模型吗?
能!当然能!
这是一个很基础的前端问题,在校招面试时,面试官想考察你前端基础功的时候,会经常被问到哦。
标准的盒模型主要有两种:
- 标准(W3C)盒模型
- IE盒模型
两者的区别主要在于元素宽度计算方式不一样。盒子模型构成:内容(content)、内填充(padding)、 边框(border)、外边距(margin)。
但是IE8及其以下版本浏览器,未声明 DOCTYPE,内容宽高会包含内填充和边框,被称为IE盒模型。
-
标准(W3C)盒模型
在标准盒模型中,总元素宽度 = width + padding + border + margin -
IE盒模型
IE盒模型中,总元素宽度 = width + margin
明晃晃的例子:
试想一下,你只有250像素的空间。让我们设置总宽度为250像素的元素:
div {
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
在标准模型下,总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距=220px (width)+ 20px (左 + 右padding)+ 10px (左 + 右border)+ 0px (左 + 右margin)= 250px
紧接着,面试官就会问:通过什么属性修改盒子模型呢?
CSS3有一个box-sizing属性
该属性定义了 user agent 应该如何计算一个元素的总宽度和总高度
box-sizing: content-box(默认)|border-box|inherit:
content-box:是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px 宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。(标准盒子模型)
即:
width = 内容的宽度
height = 内容的高度
宽度和高度的计算值都不包含内容的边框(border)和内边距(padding)。
border-box :告诉浏览器:你想要设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。(IE盒子模型)
即:
width = border + padding +内容的宽度
height = border + padding + 内容的高度
明晃晃的例子:
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}
.content-box {
box-sizing: content-box;
/* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
Content box width: 160px
Content box height: 80px */
}
.border-box {
box-sizing: border-box;
/* Total width: 160px
Total height: 80px
Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}