The different types of box models in CSS

We know that the box model is an important concept in CSS, only to understand the model of the box you can better layout and scheduling, but generally we call the box model is divided into two kinds, an IE box model and a box model

The scope of the IE box model also includes margin, border, padding, content, and the standard box model is different: the content portion of the IE box model contains border and pading.

Example: A box with margin of 20px,border for 1px,padding for 10px,content width of 200px, 50px High,

If the standard box model is explained, then the box needs to occupy the position: wide 20*2+1*2+10*2+200=262px, high 20*2+1*2*10*2+50=112px, the actual size of the box is: Wide 1*2+10*2+200=222px, 1 high *2+10*2+50=72px;

If using the IE box model, then this box needs to occupy the position: wide 20*2+200=240px, high 20*2+50=70px, the actual size of the box is: Width 200px, high 50px.

Selection of box models:

What is the choice of "standard box model"? It is simple to add DOCTYPE declaration at the top of the page <! DOCTYPE html>. If you do not add DOCTYPE statement, then each browser will be based on their own behavior to understand the Web page, ie browser will use the IE box model to explain your box, and FF will use the standard box model to explain your box, so the page in different browsers will show the difference. Conversely, if you add the DOCTYPE statement, then all browsers will use the standard box model to explain your box, the Web page can be displayed in each browser consistent.

The difference between margin and padding in ps:css

In CSS, margin refers to the distance between the bounding rectangle of itself and the outside of another container, that is, the outer distance of the container, and the padding is the distance inside the container.

First, padding

1. Grammatical structure

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

(2) padding-right:10px; Right inner margin

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

(4) padding-bottom:10px; Lower inner margin

(5) padding:10px; Four-sided unified inner margin

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

(7) padding:10px 20px 30px; Top, left, and bottom padding

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

2. Values that may be taken

(1) length specifies the amount of the inner margin of the specific unit record

(2)% the length of the padding based on the width of the parent element

(3) Auto Browser calculates the inner margin

(4) inherit specifies that the inner margin should be inherited from the parent element

3, browser compatibility issues

(1) All browsers support padding properties

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

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

CSS3 a detailed description of the Translate property

CSS3 realization of rotating halo effect

The Border-image attribute in CSS3 is described in detail