Get into the habit of writing together! This is the 4th day of my participation in the "Nuggets Daily New Plan·April Update Challenge", click to view the details of the event .
Hello everyone, I am the front-end watermelon brother. Today I'm going to talk about a CSS interview question I encountered a long time ago when I interviewed for bytes.
There are the following HTML and CSS styles, what are the width and height of the two orange areas?
<style>
.box {
width: 10px;
height: 10px;
border: 1px solid #000;
padding: 2px;
margin: 2px;
background-color: orange;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
</style>
<div class="box content-box"></div>
<div class="box padding-box"></div>
复制代码This question examines the CSS box model.
CSS box model
The CSS box consists of 4 areas, from inside to outside:
- Content box: The content box is used to display content (innerHTML), and the width and height are controlled by width and height by default. But if the box-sizing property is set to a value other than content-box, the rules applied will change.
- Padding box: The padding box, the padding property can be used to set the padding size.
- Border box: The border box, the border size and style can be set through the border property.
- Margin box: The margin box, set the margin size through the margin property.
It is important to note that margins do not count towards the actual size of the box . For example, the background color of the box will not cover the range of the margin. You can think of margin as an air wall between multiple boxes, which is used to control the distance between boxes.
We can control which box the width and height are applied to by box-sizing, which will be explained below.
Standard box model (content-box)
For modern browsers, elements use the standard box model by default. Of course you can also set it explicitly as below.
.box {
box-sizing: content-box;
}
复制代码In the standard box model, the width and height properties are used to set the Content box .
Let's go back to the topic, first look at the width and height of the first orange block.
.box {
width: 10px;
height: 10px;
border: 1px solid #000;
padding: 2px;
margin: 2px;
background-color: orange;
}
.content-box {
box-sizing: content-box;
}
复制代码<div class="box content-box"></div>
复制代码The width of content is 10px.
padding 为 2px，这个 padding 是 padding-left、padding-right、padding-bottom、padding-left 的简写属性。盒子的宽需要将 padding-left 和 padding-right 都计算在内。
然后是左右两个 border 条。margin 不计算在盒模型中。
所以对于盒模型来说，宽度就是 16px（10 + 2 * 2 + 1 * 2），高度同理，也是 16px。
这个就是答案了吗？
并不是，因为我们要找到的橙色块的宽高，其实就是 Padding box 的宽高，这个块并不包括黑色的 border 边框线。所以我们的第一个橙色块宽高为 14px。
我们再深挖一下，如果我们给 border 颜色设置为透明，比如 border: 1px solid rgb(0, 0, 0, 0)，你觉得橙色块宽高为多少？
答案是 16px。背景色会先填充整个盒子，然后再在其上添加 border。如果 border 变成透明了，就会将它原本覆盖的部分橙色区域显现出来。
怪异盒模型（border-box）
怪异盒模型，也叫 IE 模型。
IE 浏览器的早期版本没有遵循 CSS 标准，width 和 height 是用来设置 Border box 的宽高，而不是 Content box 的宽高，导致不同浏览器的表现不同，毫无疑问是个浏览器 bug。
后来 CSS3 引入了 box-sizing，让开发者可以选择使用哪种盒模型，提供更好的灵活性。通过下面的设置，我们可以将元素的盒模型设置为怪异盒模型。
.box {
box-sizing: border-box;
}
复制代码怪异盒模型中，width 和 height 属性用于设置 Border box 盒子。即我们直接给元素对应的盒子设置了宽高，再通过 padding 和 border，才能计算出 Content box。
我们看看题目中第二个橙色块的宽高如何计算。
.box {
width: 10px;
height: 10px;
border: 1px solid #000;
padding: 2px;
margin: 2px;
background-color: orange;
}
.border-box {
box-sizing: border-box;
}
复制代码<div class="box border-box">
复制代码The width of the box model is 10px, minus the 2px of the border (two 1px border lines on the left and right), the calculated width of the Border box is 8px. The height calculation is the same.
So the answer to this question is: the width and height of the first orange block is 14px, and the width and height of the second orange block are 8px.
end
For DOM elements, we have two box models:
box-sizing: content-box: The standard box model that width and height take effect on the Content box is the default box model;box-sizing: border-box: Weird box model where width and height work for Border boxes.
In addition, box-sizing only supports the above two values, there is no box model like padding-box, don't think too much.
I am the front-end watermelon brother, a programmer who likes to share front-end technology. Welcome to my public account "Front-end watermelon brother".