Css knowledge (7)-box model and css knowledge Box Model

Css knowledge (7)-box model and css knowledge Box Model
1. Introduction

Starting from this section, we will go to the third part of this series-css rendering. This section describes the layout and rendering features of css on the page. There are two types: Text and block.

The first type is text. This part is relatively simple, such as font size, Font, color, background color, and whether to bold. The key point is to set the font, set the line height, and use relative values for text-related distances) -- Explanation of the default browser style. Another important point is the fontAwesome, the most popular fontAwesome library on the web end. I have mentioned this in a previous article. For more information, see replacing the icon on the web page with fontAwesome. I will not repeat it here.

The second type is block. There are many knowledge points in this part, including the box model, float, position, and display. This article describes the box model. Other content will be introduced in subsequent articles.

2. What is a "box"

I still remember a few years ago when I was in college, I was asked about the "box model". I didn't know what it meant. I hurried back to the dormitory and checked the Internet. It turned out to be the margin, padding, and border I knew long ago, but I didn't even know the word "box. -Therefore, you should not only be satisfied with the code segments and tips found on the Internet, but also have a comprehensive understanding of some knowledge systems. Of course, I later learned that the box model is not only margin, padding, and border, but also has other knowledge.

　　This is also something I have been thinking about over the past few days. I am thinking: What kind of knowledge system architecture should the web Front-end have? Previously, I thought we could use W3C as an outline to learn about W3C. Later I found that I was wrong, and W3C was not comprehensive.

What truly covers the web Front-end knowledge system is the browser kernel, which does not mean that you can learn about the browser kernel in detail and make a browser. A browser is a platform for running web Front-end code. We need to learn what modules exist in the browser kernel. I will not talk about it in detail, but I will share it later.

Take care of beginners here. Css beginners must have learned padding, border, and margin when learning css basics, that is, padding, border, and margin. The three constitute a "box ". Just like the courier we received, we had bought a small iphone and it was really a big box. Because there is a compartment (internal margin) between the iphone's white box and the iphone's machine, the iphone's white box is thick, although thin (Border ), there is also a foam board (outer margin) between the box and the courier box ). This is a typical box.

　　

For example, the real content is the text, and the text peripheral has a 10px padding, 5px border, and 10px margin. Have you seen the box?

3. The box width is 3.1. If the fixed width is set

In this case, we recommend that you first perform an experiment before querying various materials:

　　

For example, after obtaining the webpage effect, we can use a tool to measure the width of the text content. We found that the text content is exactly Px in width, which is the configured width.

Therefore, in the box model, the width we set is the content width, not the width of the entire box. The width of the entire box is the sum of (content width + border Width + padding width + margin width. In this way, one of the four will change the width of the box. This is unfriendly to us.

It doesn't matter. Some people have found this thing unfriendly and it has been solved. Let's talk about it later.

3.2. When the parent container is filled

By default, the display: block of the div is filled with the full width of the parent container. For example:

　　

But don't forget that this div is a box model. Its entire width includes (content width + border Width + padding width + margin width), and the entire width is filled with the parent container.

The problem lies here. If the width of the parent container remains unchanged, manually increasing the width of one of the margin, border, or padding options will reduce the content width. In extreme cases, if the width of the content cannot be further compressed (for example, the width of a word), the browser will force the width of the parent container to increase. This is not what we want to see.

3.3. In case of Package content

In this case, the content width is calculated based on the content, and the width of the box is increased based on the Content width (padding width + border Width + margin width.

　　

4. Check the box width again.

As mentioned above, setting the width for the box model only sets the width of the content, which is unreasonable. How can this problem be solved? The answer is:Box-sizing: border-box

　　

For example, after the div is set with box-sizing: border-box, the PX width is the content + border width (excluding margin ), this is more in line with our actual requirements.

When writing css for the system, we recommend that you set the first style:

The well-known bootstrap also adds box-sizing: border-box to its * selector. Why don't we do this?

5. Vertical margin overlap

When we mention margin here, we have to mention this feature of margin-vertical overlap. For example, if the vertical margin of <p> is 16 PX, what is the vertical distance between the two <p>?

Generally speaking, it should be 16 + 16 = 32px, but the answer is still 16px. Because vertical margin overlaps, large margin eats small ones (you can experiment on your own ).

6. Draw a "Triangle" with a div"

Triangle is common in daily web pages, such as Baidu homepage:

　　

And my open source project wangEditor (http://www.cnblogs.com/wangfupeng1988/p/4198428.html) in the page effect:

　　

Of course, you can use background images and fontAwesome to achieve this effect, but you can also use div to achieve this effect, which is very simple and can be encapsulated for general purposes:

7. Summary

In this section, we will explain the knowledge of the Box Model in a small space, which is more suitable for beginners, but more suitable for experienced developers who have not learned css in the system: we recommend that you systematically study the knowledge system.

Next we will continue with this Part and talk about float.

Bytes -------------------------------------------------------------------------------------------------------------

Welcome to my tutorial:From design to Model《Deep understanding of javascript prototype and closure SeriesMicrosoft petshop4.0 source code explanation video json2.js source code interpretation video

Welcome to my open-source project --WangEditor, simple and easy-to-use rich web text editor

Bytes -------------------------------------------------------------------------------------------------------------