Make CSS layout more intuitive: box-sizing and css layout box-sizing

Make CSS layout more intuitive: box-sizing and css layout box-sizing

Make CSS layout more intuitive: box-sizing

If you have written CSS or you have been familiar with CSS, I believe you are no stranger to the box model. One of the most confusing aspects of CSS is the calculation of the height and width in its box model. Let alone those beginners who have been writing CSS for a long time. The height and width in CSS are always less intuitive, so you are always confused. You cannot tell the height and width at a glance. Sometimes you want it to be Px in width, but this is not the case. However, if you set the correct box-sizing attribute, the height and width of the box will indeed be 100px. Is it a bit dizzy? Well, I will introduce it in detail below.

1. Box Model

An important concept of CSS is the CSS box model. It controls the height and width of these elements on the page. The number of box models can be confusing, especially when calculating the height and width. The actual box width (the width displayed on the page) and height need to be added with some other attributes, such:

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

This does not seem so intuitive, so let's look at a picture:

This means that if we set a width of 200px, and the actual displayed box width may be greater than 200px (unless there is no left or right border or left or right padding ). This may seem strange. The width set by CSS 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 displayed on the page to be PX, We need to subtract its left and right borders and add the left and right sides to the white, and then set it to the corresponding CSS width. For example, if we want the box width to be PX, we need to first subtract the Left and Right fill each 20 PX, the left and right sides of each 1px, and then set the corresponding CSS width 158px. This makes the Code look incredible, especially for new users (I 've been confused about this for a long time ). I set the width to 158px, but it shows 200px. This is somewhat less intuitive and clear.

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

2. box-sizing

Different from the above, when you set box-sizing: border-box, this can achieve your desired purpose. For example, if we want a box with a width of PX, we can directly set the width to PX. Is it clear. When its left and right borders and left and right are set to whitelist, its content area is automatically adjusted. This may be more direct and clear at a glance. The CSS code is as follows:

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

For example:

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

3. Other values of box-sizing

Box-sizing can also be set to content-box. In this way, the CSS width is only set to the width of its content area. This is true for browsers by default. Example 1.

Box-sizing can also be set to inherit, that is, inherit this attribute from the parent element.

4. browser compatibility

IE8 and later versions support this attribute. Firefox requires the browser vendor prefix-moz-. For earlier versions of IOS and Android browsers, you also need to add-webkit -. Many reset.css1_normal.css statements contain the following CSS statements:

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

Conclusion

I believe you understand the meaning of box-sizing. This is one of the common knowledge points in front-end questions. The interviewer usually asks you, what is the role of * {box-sizing: border-box;} after setting the following statements in CSS? I believe you will answer this question clearly now.