Shulou(Shulou.com)06/01 Report--

This article mainly introduces "the case analysis of the box model of css". In the daily operation, I believe that many people have doubts about the case analysis of the box model of css. The editor consulted all kinds of data and sorted out the simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts of "the box model case analysis of css"! Next, please follow the editor to study!

CSS Box Model and Strange Box Model

The Box Modle can be used to lay out elements, including the inner margin (padding), the border (border), the outer margin (margin), and the actual content (content).

Standard box model

The size of the box in the standard box model is content + border + padding + margin. Where width refers to the width of the content area content, and height refers to the height of the content area content. Here is a code and a picture to show how the size of a box is rendered.

.box {

Width: 100px

Height: 100px

Padding: 10px

Margin: 10px

Border: 10px solid red

Background-color: # 606266

/ * Standard box model * /

Box-sizing: content-box

}

At the bottom of the debug tool style in chrome, you can see the length and width, inner margin (padding), border (border) and outer margin (margin) of a box. When you move the mouse over dom, you can see that the actual length and width of the box are 140px and 140px respectively. This is because our width is 100px, the height is 100px, the padding is 10px, the border is 10px. So the length and width of our box we see is 140px. Because it is a block-level element, the actual box will occupy a single line, and the 140px here is not a margin. In standard mode, the most intuitive feature is that the values of widith and height determine the size of the box's content area (content). The actual size of the box is not necessarily the widith and height values you set. Because there are also padding,border,margin and so on to affect it.

IE weird box model

Width in the grotesque box model refers to the total width of the content, border, and inner margin (content + border + padding); height refers to the total height of the content, border, and inner margin.

The size of the box under the weird box model = width (content + border + padding) + margin. Here is a code and a picture to show how the size of a box is rendered.

.box {

Width: 100px

Height: 100px

Padding: 10px

Margin: 10px

Border: 10px solid red

Background-color: # 606266

/ * IE box model * /

Box-sizing: border-box

}

As you can see in the figure, we set widht and height to 100px, so the actual size of the box is also 100px (here are the values of width and height, not margin). Then the content of the content area (the area where you can put text and div tags) is width-padding-border = 60.

How to switch the box model

Add the DOCTYPE declaration to the top of the html and most browsers will default to the standard box model. The above code also shows that the box model can be changed through the property box-sizing of css.

* {

/ * IE box model, order and padding are calculated into width * /

Box-sizing: border-box

/ * padding is calculated into width and is not recommended. Very old browsers only support it * /

Box-sizing: padding-box

/ * border and padding are not counted in width * /

Box-sizing: content-box

/ * inherit the parent element * /

Box-sizing: inherit

}

Compatibility

You can see that modern browsers support this attribute.

At this point, the study of "case Analysis of the Box Model of css" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.