Box-sizing makes CSS layout more intuitive

The Box-sizing property allows you to define specific elements that match a range in a particular way. Box-sizing is one of CSS3 's box attributes. When it comes to CSS, box model I think a lot of people will be more annoying, especially for beginners, but this box model is our CSS in the use of a more important attribute. So what does CSS3 's box-sizing have to do with the box model? The first sentence said, Box-sizing is one of CSS3 box properties, then he certainly followed the CSS box model principle, in order to better learn and understand this box-sizing attribute, We need to first understand the CSS box model principle.

For example, if you need to place two border-bordered boxes side-by, you can set box-sizing to "Border-box". This allows the browser to render a box with the specified width and height, and to place the border and inner margins in the box.

If you have written CSS or you have touched CSS, I believe you must be familiar with the box model. CSS one of the more confusing place lies in its box model about the height and width of the calculation, not to mention those beginners, that is written a long time CSS people will also have such a feeling. The height and width of the CSS is always less intuitive, so you are always confused, you can not distinguish its height and width at a glance. Sometimes you want it to be 100px wide, but it's not always the case. However, setting the correct box-sizing properties, the height and width of the box will indeed be the 100px you set. Whether a little dizzy, OK, below I detailed introduction.

　　1. Box model

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

padding + border + width = size of the box

padding + border + height = top 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 rendering of the box may be greater than 200px (unless there is no left and right border and left and right filler). This may seem strange, the width of the CSS setting is only the width of the content area, not the width of the box. Similarly, the height is similar.

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

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

　　2, Box-sizing

Unlike the above, when you set the Box-sizing:border-box, this will achieve your desired purpose. For example, above we want a box with a width of 200px, then we set the width to 200px directly. It looks a lot clearer. When the left and right edges and padding are set, its content area is automatically adjusted. This may be more direct and straightforward. The CSS code is as follows:

div {

Box-sizing:border-box;

width:200px;

padding:20px;

border:1px solid #DDD;

}

The following figure:

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

　　3, box-sizing the other value

Box-sizing can also be set to Content-box, so that when you set the width of the CSS, you simply set the width of its content area, which the browser defaults to. As we have 1 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 property, Firefox needs 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 include the following CSS statements, which are also the preferred usage:

*, *: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. What's more, this is one of the common knowledge points of many of the front-end face tests. Interviewers usually ask you, CSS set the following statement after *{box-sizing:border-box; what does it do? I'm sure you will be able to answer this question clearly now.