How much do you know about css (7)--box model_html/css_WEB-ITnose

1. Introduction

Starting from this section, we enter the third part of this series??CSS presentation. This section will describe several layout and rendering features of CSS on the page. Includes two categories: text and blocks.

The first type of text. This part is relatively simple, such as setting the font size, font, color, background color, whether to bold, etc. The key point is that setting fonts, setting line heights, and text-related distances all use relative values. These things have been mentioned in the section "How much do you know about CSS (4)?? Interpretation of browser default styles". Another important point is fontAwesome, the most popular font library on the web. I have written an article about it before. Please refer to "Please use fontAwesome to replace small icons on web pages". I will not repeat it here.

The second type of blocks. There are many knowledge points in this part, the important ones are: box model, float, position, and display. This article talks about the box model, and subsequent articles will introduce other contents in sequence.

2. What is a "box"

Speaking of "box", I still remember being asked about the "box model" several years ago when I was in college. I didn't even know what it meant at the time. I returned to the dormitory and hurriedly checked online. It turned out that I had known margin, padding and border for a long time, but I didn't even know the word "box". ??So, don’t just be satisfied with the code snippets and tips found online, but 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 other knowledge.

Let me add a digression here, which is also something I have been thinking about these days. I'm thinking: What kind of knowledge system architecture should the web front-end have? Before, I thought that I could use W3C as an outline and it would be enough to learn the W3C stuff. Later I found out that I was wrong, W3C was not comprehensive yet.

The thing that truly comprehensively covers the web front-end knowledge system is the browser kernel. This does not mean that you should understand the browser kernel in detail and build a browser. The browser is a platform on which web front-end code runs. We need to learn what modules are in the browser kernel. I won’t go into details yet, I’ll share them later when I have the opportunity.

Here we take care of beginners. Friends who are new to CSS must have learned padding, border and margin when they first learned the basics of CSS, that is, inner margin, border, and outer margin. The three of them form a "box". Just like the express delivery we received, we originally bought a small iPhone, but what we received was indeed such a big box. Because there is a spacer layer (inner margin) between the white iPhone box and the iPhone machine. The white iPhone box has a thickness, although it is very thin (border). There is also a layer of foam board (outer margin) between the box and the express box. This is a typical box.

　　　

　　 As shown in the picture above, the real content is these words. There are 10px inner margin, 5px border and 10px outer margin around the text. See the box?

3. The width of the box

3.1. When a fixed width is set

When encountering this kind of problem, I suggest that before querying various information, it is better to do an experiment yourself:

　

As shown above, after getting the web page effect, we can use the screenshot tool to measure the width of the text content. Found that the width of the text content is exactly 300px, which is the width we set.

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, if we change one of the four, it will cause the width of the box to change. This is not friendly to us.

It doesn’t matter, this unfriendly thing has been discovered by someone a long time ago and has been solved. Let’s talk about it below.

3.2. When the parent container is filled

By default, the display:block width of a div will fill the entire parent container. As shown below:



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 fills the parent container.

That’s the problem. If the width of the parent container remains unchanged, and we manually increase the width value of one of margin, border or padding, it will cause the content width to be reduced. In extreme cases, if the width of the content is compressed to the point where it cannot be compressed anymore (for example, the width of a word), the browser will force the width of the parent container to be increased. This is not what we want to see.

3.3. In the case of wrapping content

In this case it is relatively simple. The width of the content is calculated according to the content. The width of the box will be increased based on the width of the content (padding width border width margin width).

　

4. Look at the width of the box again

As mentioned earlier, setting the width for the box model only results in setting the width of the content, which is unreasonable. How to solve this problem? The answer is: box-sizing:border-box

　

As shown in the picture above, after div is set with box-sizing:border-box, the width of 300px is the width of the content border (excluding margin), which is more in line with our actual requirements.

It is recommended that when writing css for the system, the first style is:

The famous 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. As shown in the picture below, the vertical margin of

is 16px, so what is the vertical distance between the two

?

According to common sense, it should be 16 16 = 32px, but the answer is still 16px. Because the vertical margins will overlap, the larger ones will "eat" the smaller ones (you can experiment by yourself).

6. Use div to draw "triangle"

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

and The page effects in my open source project wangEditor (http://www.cnblogs.com/wangfupeng1988/p/4198428.html):

　

Of course you can use background images and fontAwesome to To achieve this effect, you can also use div to achieve this effect. It is very simple and can be encapsulated universally:

7. Summary

We will spend a lot of time explaining this section. With the relevant knowledge of the box model, it is more suitable for beginners, but it is more suitable for experienced developers who have not systematically studied CSS. Again: it is recommended that everyone systematically learn the knowledge system.

Next we will continue this part and talk about float again.

----------------------------------------------- -------------------------------------------------- ---------------

Welcome to follow my tutorial: "From Design to Pattern" " In-depth understanding of javascript prototypes and closures Series 》《Microsoft petshop4.0 source code interpretation video》《json2.js source code interpretation video》

You are also welcome to follow my open source project??wangEditor, a simple and easy-to-use web rich text editor Device

---------------------------------------- -------------------------------------------------- ------------------