Make CSS layouts more intuitive: box-sizing

Make CSS layouts more intuitive: box-sizing

If you've ever written CSS or you've been exposed to CSS, I'm sure you're not unfamiliar with the box model. One of the most confusing parts of CSS is the calculation of height and width in its box model, not to mention beginners, who have been writing CSS for a long time to feel the same way. The height and width of the CSS is always less intuitive, so you are always confused and can not distinguish its height and width at a glance. Sometimes you want it to be 100px in width, but that's not always the case. However, setting the correct box-sizing property, the height and width of the box will indeed be the 100px you set. is a bit dizzy, OK, below I detailed introduction below.

1. Box model

One of the important concepts about CSS is the CSS box model. It controls the height and width of these elements of the page. The box model is somewhat confusing, especially when it comes to height and width calculations. The width of the real box (the width of the page rendered) and the height, you need to add some other properties, such as:

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

This doesn't seem so intuitive, so let's look at a diagram:

This means that if we set a width of 200px, the actual rendered box width may be greater than 200px (unless there is no left and right border and left and right padding). This may seem odd, the width of the CSS setting is only the width of the content area, not the width of the box. Similarly, highly similar.

The direct result of this is that when we want the page to render a box with a width of 200px, we need to subtract its left and right padding, and then set it to the corresponding CSS width. For example, we set the Hope box width to 200px, you need to subtract the left and right padding 20px, the left and right border each 1px, and then set the corresponding CSS width 158px. This makes the code look a little weird, especially for newbies (I've been confused for a long time on this issue). I clearly set the width is 158px, it presents 200px. This is somewhat less intuitive and at a glance.

Fortunately, we have a better way to achieve what we want.

2, Box-sizing

Unlike the above, when you set up Box-sizing:border-box, this will do what you want to achieve. For example, above we want a box with a width of 200px, then we directly set the width to 200px. Does it look much clearer? When you set its left and right borders and the left and right padding, its content area adjusts automatically. This may be more straightforward and at a glance. The CSS code is as follows:

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

Such as:

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

3, box-sizing other values

Box-sizing can also be set to Content-box, so setting the width of the CSS is just the width of its content area, which is the default for browsers. As we have 1 cited examples.

Box-sizing can also be set to inherit, which means that the property is inherited from the parent element.

4. Browser compatibility

IE8 and above support this attribute, Firefox need to add browser vendor prefix-moz-, for the lower version of iOS and Android browser also need to add-webkit-. In fact, many reset.css or normal.css contain the following CSS statements, which are also more favourable to use:

*, *: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. The same tells you that this is one of the most common knowledge points in front-end questions. The interviewer will usually ask you, what is the function of CSS after setting the following statement *{box-sizing:border-box;}? I'm sure you'll be sure to answer this question clearly now.

Make CSS layouts more intuitive: box-sizing