CSS box model, css box

CSS box model, css box
Box Model

In the world where CSS is all framed, today I want to talk about my understanding of the CSS box model. If there is anything wrong, please pat the bricks.

1. What is the CSS box model?

In general, the CSS Box Model consists of the margin (margin), border (border), padding (padding), and content. For details, see:

 

Ii. Functions of margin, border, padding, and content in the box model (1) margin:

 

Understanding by yourself	Controls the spacing of spaces around elements to visually separate them. Note: In-row elements are wood-mounted with margin-top and margin-bottom.
CSS authoritative guide	Boundary. An extra blank area is generated around the element. "Blank area" usually refers to areas where other elements cannot appear and the parent element background is visible.

 

The following is a preliminary demo of the role of margin. For example, there are two block-level elements, such as div. When their margin values are set to 0, the effect is as follows:

1 <! DOCTYPE html> 2  

What if I want to keep the top margin of div2 away from div1, such as 10 pixels? We can set the corresponding div2 style margin-top: 10px. The setting result is as follows:

1 <! DOCTYPE html> 2  

To achieve the effect that div2 is 10 pixels apart from the vertical div1, you can also set the div1 margin-bottom: 10px;

Alternatively, set div1's margin-bottom: 10px; and div2's margin-top: 10px;

You may feel strange. Why can you set both ?!!!

At the same time, should their relative distance be 20 PX ?!!!

This involves the overlap of margin.

The overlap of margin in the css2.0 specification is described as: the horizontal margin will never overlap, and the vertical margin may overlap between specific frames.

By me, this vertical margin may overlap between specific boxes. What is the specific situation. See the following table.

1,	In a normal stream, two or more adjacent vertical edges of block-level elements overlap. If all the margins are positive, select the maximum value. If a negative margin is displayed, subtract the negative margin from the positive margin.
2,	The vertical margin between a floating box and other boxes does not overlap.
3,	The absolute position box does not overlap with the relative position box and the margin

Now we know why the margin of the two divs in the previous demo is not 20px, but 10px.

For-the vertical margin between a floating box and other boxes is not overlapped. I also want to talk about the use of block elements + float + margin. Please note that there will be a bilateral gap problem under ie6. a common solution is to replace block elements with inline-block elements, however, in addition to some organizations, it is estimated that ie6 has been used by some people !!!

(2) border:

It is visible, and you can set the border of any element. For example, I set a div to a black solid-line border of 5px border: 5px solid #000000. See:

1 <! DOCTYPE html> 2

(3) padding:

Padding sets the distance between the content area and border without negative values. If you do not use the debugger, you cannot see the value of padding. Note: No padding-top or padding-bottom are available for the row elements.

(4) content:

Content. Is the region content occupied by the content, rather than the content region contentarea.

I rely on, content! = Contentarea?

Answer: Yes.

When talking about contentarea, it is necessary to clearly understand what is a standard box model and what is an IE box model. In fact, their differences are different from the contentarea resolution. To put it bluntly, the width and height resolution are different. The boxes are the same, including margin, border, padding, and content. Let's take a look at the two models, starting with the standard box model:

The width and height of the standard box model only contain content in the content area. For details, see

The width and height of the IE box model include content, inner margin padding, and border in the content area. For details, see

 

How can this be solved !!! A box is parsed differently in different browsers !!!

Don't worry, declare the document type, one-click quick solution.

<! DOCTYPE html> if you are familiar with it, its role is to unify the standard mode and the weird mode into the standard mode. Of course, if you parse the box, it will be resolved to the standard mode.

I rely on it, isn't it too arrogant? If you are tough, you may say, I think the IE box model is good, and employers need to use it. Haha, don't get angry, css3 provides the box-sizing attribute, which has two values: content-box and border-box. When you declare the document type <! DOCTYPE html>, the default value is content-box, which is the standard box model. If you want to use the IE box model, reset box-sizing to border-box.

Bootstrap does the same. It is part of the css reset of bootstrap for your reference.

Next, let's simply verify whether the two values of box-sizing (content-box and border-box) are the same as the standard box model and IE box model mentioned above.

When you set box-sizing: content-box, the result of the chrome debugger is as follows:

We can see that the configured width: 80px is displayed in the content area, which is also 80px.

Next, when I set box-sizing: border-box, the result of the chrome debugger is as follows:

As you can see, I only changed the value of box-sizing. The rest are unblocked. I set the width: 80px, but the content is only 50px, and you can find it carefully.

Width (80px) === content (50px) + padding (10px) * 2 + border (5px) * 2

Height (80px) === content (50px) + padding (10px) * 2 + border (5px) * 2

 

By comparing and analyzing the above two images, we can know that the two values of box-sizing correspond to the standard box model (content-box) and IE box model (border-box ).

Well, the box model is about to be mentioned here. It's not too early to take a nap. This is the first time I opened a blog today. If something is wrong, I hope you can beat the bricks ~