Make CSS layout more intuitive: box-sizing_html/css_WEB-ITnose

Make CSS layout more intuitive: box-sizing

If you have written CSS or been exposed to CSS, I believe you must be familiar with the box model. One of the more confusing aspects of CSS is the calculation of height and width in its box model. Not to mention beginners, even people who have written CSS for a long time will feel the same way. Height and width in CSS are always not intuitive, leaving you confused and unable to tell the difference at a glance. Sometimes you want it to be 100px wide, but that's not always the case. However, by setting the correct box-sizing properties, the height and width of the box will be exactly the 100px you set. Are you a little dizzy? Okay, let me introduce it in detail below.

1. Box model

An important concept about CSS is the CSS box model. It controls the height and width of these elements on the page. The box model can be somewhat confusing, especially when it comes to height and width calculations. The width of the real box (the width displayed on the page) and height need to be added with some other attributes, such as:

Padding border width = width of the box
padding border height = height of the box

This doesn’t seem so intuitive, so let’s look at a picture:

This means that if we set a width of 200px, the width of the actual rendered box may It will be larger than 200px (unless there are no left and right borders and left and right padding). This may seem strange, but the width set by CSS is only the width of the content area, not the width of the box. Again, highly similar.

The direct result of this is that when we want the width of the box presented on the page to be 200px, we need to subtract its left and right borders and left and right padding, and then set it to the corresponding CSS width. For example, in the picture above, if we set the desired box width to 200px, we need to first subtract 20px from the left and right padding, 1px from the left and right borders, and then set the corresponding CSS width to 158px. This makes the code look a bit confusing, especially for novices (I was confused on this issue for a long time). I clearly set the width to 158px, but it displayed 200px. This is somewhat less intuitive and obvious.

Fortunately, we have better ways to achieve what we want.

　2. box-sizing

Different from the above, when you set box-sizing:border-box, this can achieve the purpose you want. For example, above we want a box with a width of 200px, then we directly set the width to 200px. Doesn't it look much clearer? After setting its left and right borders and left and right padding, its content area will be automatically adjusted. This might be more direct and self-explanatory. The CSS code is as follows:

div {  box-sizing: border-box;  width: 200px;  padding: 20px;  border: 1px solid #DDD;}

As shown below:

In fact, this is more respected by designers and developers.

3. Other values ​​of box-sizing

Box-sizing can also be set to content-box. In this way, when setting the width of CSS, it only sets the width of its content area. Browse This is the case by default. Take the example we gave in 1.

Box-sizing can also be set to inherit, which means it inherits this property from the parent element.

4. Browser compatibility

IE8 and above support this attribute. Firefox needs to add the browser manufacturer prefix -moz-, and lower versions of IOS and Android browsers also need to add on-webkit-. In fact, many reset.css or normal.css contain the following CSS statements, which are also more favorable usages:

*, *:before, *:after {  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box;}

Conclusion

See here, I believe you must understand the meaning of box-sizing. So what I also tell you is that this is one of the common knowledge points in many front-end interview questions. The interviewer will usually ask you, after setting the following statement in CSS *{box-sizing:border-box;}, what is its function? I believe you will clearly answer this question now.