CSS Box Model understanding: 5 minutes to understand what the CSS box model is?

What is a CSS box model? After all, when learning CSS, CSS box model can often be seen, so the next article in the PHP Chinese network with everyone to talk about the concept of CSS box model and the CSS box model understanding.

First, let's take a look at what the CSS box model is.

From the Baidu Encyclopedia we can know that the web design often listen to the property name: Content, padding (padding), Border (border), margin (margin), CSS box mode has these properties. These properties we can transfer it to our daily life of the box (box) to understand that the daily life of the box is a box that can be loaded, but also have these properties, so call it a box model. Such as:

CSS box model is a kind of thinking model used in the CSS technology which is often used in web design.

So, after knowing what the CSS box model is, how do you understand the CSS box model?

The understanding of CSS box model

We can think of the CSS box model as a box in our daily life to understand.

Content is a box of things, it has height (height) and width (width), can be a picture, can be text or a small box nested, in reality, the content can not be larger than the box, the contents of the box will burst the box, but in CSS, the box is flexible, The content is too big to hold the box, but it will not damage the box.

Padding is filled, as if we are in order to ensure that the contents of the box is not damaged, filled with something, such as foam or plastic film, filled with a lot of small, soft and hard, the response in the Web page is the size of padding.

Border is another layer of border, because the border has a size and color properties, equivalent to the thickness of the box and its color or material.

Margin is the distance between our box and other boxes or other things. If there are many boxes, margin is the direct distance between the boxes, can be ventilated, but also beautiful and easy to remove.

CSS box model has two kinds, one is the box model is the standard model, the other is the IE box model

CSS two box model Setup method:

/* Standard Model */box-sizing:content-box; /*ie model */box-sizing:border-box;

CSS Two box models can be represented by:

Standard Model:

IE Box Model:

From the above figure, we can clearly see that the width or height of the IE box model is the content width and height, the box model is the standard model width or height of content (contents) + padding (padding) + border (border)

Let's give an example: the width and height of a div is 105px, the padding is 10px, the border is 5px, and the margin is 30px. The total width and total height (including margin, border, padding, content) of the Div displayed under the Model box are 5 + + + + + + = total width and total height (including margin, border, padding, content) of Div displayed under 155px,ie box model 105+ = 135p X.

<style>  Content {background: #eee; height:auto;border:1px solid black;}  . div {width:105px;height:105px;margin:30px;padding:15px;border:5px solid black;}  . div-01 {background:green;}  . div-02 {Background:pink;box-sizing:border-box;} </style><div class= "Content" >  <div class= "div div-01" >w3c box model </div>  <div class= " div div-02 ">ie box model </div></div>

The effect is as follows:

The obvious difference is that if the width of the element is certain, the width of the model is not including the inner margin and the border, ie box mold includes.

Of course, see here, the CSS box model content is certainly not fully mastered, then you can go to see the PHP Chinese web CSS Video tutorial section and CSS3 Video tutorial section, the video about CSS3 box model is very detailed.