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

This article mainly introduces "what are the differences between the types of CSS box models". In daily operation, I believe many people have doubts about what are the differences between the types of CSS box models. Xiaobian consulted various materials and sorted out simple and easy operation methods. I hope to help you answer the doubts about "what are the differences between the types of CSS box models"! Next, please follow the small series to learn together!

Box model is an important concept in css, understand the box model to better typesetting. There are two kinds of box models: ie box model and standard w3c box model.

The scope of the ie box model also includes margin, border, padding, content, and the standard w3c box model is different: the content part of the ie box model includes border and padding.

Example: a box with margin 20px, border 1px, padding 10px, content width 200px, height 50px,

If we use the standard w3c box model to explain, then the box needs to occupy the position: width 20*2+1*2+10*2+200= 262px, height 20*2+1*2*10*2+50= 112px, the actual size of the box is: width 1*2+10*2+200= 222px, height 1*2+10*2+50= 72px;

If we use the ie box model, then the box needs to occupy the position: width 20*2+200=240px, height 20*2+50=70px. The actual size of the box is: width 200px, height 50px.

Box model selection:

What is the standard w3c box model? It's simple, just add a doctype declaration at the top of the page. Without the doctype declaration, each browser will interpret the web page according to its own behavior, that is, ie browser will use the ie box model to interpret your box, and ff will use the standard w3c box model to interpret your box, so the web page will display differently in different browsers. Conversely, if you add the doctype declaration, all browsers will use the standard w3c box model to interpret your box, and the page will display consistently across browsers.

PS: CSS margin and padding difference

In CSS, margin refers to the distance between its own border and the border of another container outside it, which is the distance outside the container;padding is the distance inside the container.

I. Padding

1. Grammar structure

(1) padding-left:10px; left padding

(2) padding-right:10px; right padding

(3) padding-top:10px; upper padding

(4) padding-bottom:10px; bottom padding

(5) padding: 10px; uniform padding on all sides

(6) padding:10px 20px; top and bottom, left and right padding

(7) padding:10px 20px 30px; top, left, right, bottom padding

(8) padding:10px 20px 30px 40px; top, right, bottom, left padding

2. Possible values

(1) length specifies the padding length of a specific unit

(2) % Length of padding based on width of parent element

(3) Auto Browser calculates padding

(4) inherit specifies that padding should be inherited from parent elements

3. Browser compatibility issues

(1) All browsers support padding

(2) Any version of IE does not support the attribute value "inherit"

At this point, the study of "what are the differences between CSS box models" is over, hoping to solve everyone's doubts. Theory and practice can better match to help you learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

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.