CSS Box Model

CSS Box Model
??

I will give you a detailed analysis of the box model today.

 

The composition of the box: content, padding, border, and margin ).

Since the box model is a box model, you can guess that this model comes from the box in life.

Suppose you want to give another person a crystal doll. Then you will surely pack the dolls beautifully, and because the dolls are crystal and very afraid of cracking, you need to add shockproof things to the packaging to the foam, or cloth.

If we use the box model to explain the entire wrapped gift:

Content: it is the crystal doll.

Padding: The shockproof stuff filled in it.

Border: The entire box. The box has the thickness attribute.

Margin: If someone else gives a present, the master puts two gifts together. The distance between one gift and the other is described in Margin.

 

 

 

There are two types of box models: the IE box model and the standard box model.

 

 

The difference is that the width and height attributes of a block-level element can be seen.

 

So there are two box models. Which one do we use? Of course, the standard box model --------- standard W3C box model is used.

How to use it? Add the DOCTYPE declaration to the top of the webpage. If the DOCTYPE statement is not added, Each browser will understand the webpage based on its own behavior, that is, IE will use the IE box model to explain your box, FF will use the standard W3C box model to explain your box, so the web page will be displayed differently in different browsers. Otherwise, if the DOCTYPE statement is added, all browsers will use the standard W3C box model to explain your box, and the web page will be consistent in each browser.

 

 

In Web Design

 

Each HTML attribute can be viewed as a box.

 

Rules for inner filling and boundary:

If there are four parameters: upper right bottom left, you can also specify a single direction

If there is only one parameter: upper right bottom left

If there are two parameters: the first parameter indicates the upper and lower parameters, the second parameter indicates the left and right parameters.

If there are three parameters: upper, lower, and lower

For example:

 

For the nested box, the internal box is based on the Content of the external box, and the content is counted as the margin of the internal box.

 

 

If a self-box Float: right is in the nested box. The box is not out of the control of the parent box.

The sub-DIV does not have the content of the parent DIV before floating.

 

 

This is after the sub-DIV float left and right

 

The margin of Float1 and 2 is based on the bottom line after the parent DIV inputs father. However, at this time, the parent DIV only gives them a benchmark, and the content after its left and right float no longer contains them.

For boxes that are side by side, the calculation starts from the margin of the two boxes.