CSS know how much (7)--Box model

Original: CSS know how much (7)--Box model

1. Introduction

Starting with this section, we'll go into the third part of this series--css. This section describes some of the layout and rendering characteristics of CSS in the page. Includes two categories: text, block.

First Class--text. This section is relatively simple, such as setting the font size, font, color, background color, whether bold, and so on. The focus is on setting the font, setting the height of the line, and using relative values for the distance between the text, which is already mentioned in the section "CSS knows how much (4)--Interpreting browser default styles". There is also a focus, is the web side of the most popular font library fontawesome, about it I have a previous article specifically said, please see "Please use Fontawesome instead of web icon small Icons", here will not repeat to say.

The second type--block. This part of the knowledge point is very much, it is important to have: Box model, Float,position,display. This article is about the box model, and the following article will describe the other content in turn.

2. What is a "box"?

Say "box" I remember years ago, when I was in college, I was asked about the box model, and I didn't know what it meant. Back to the dorm and hurried to the Internet to check, the original is I already know margin,padding and border, but I do not know the word "box". --so don't just be content with the code snippets and tips on the web, and get a thorough understanding of some of the knowledge systems. Of course, later I know that the box model is not only margin,padding and border, but also other knowledge.

　　Here is a digression, but also I think of a few things these days. I'm thinking: what kind of knowledge architecture should this knowledge of the Web front end be? Before I thought that can use the broad-based platform, the thing that has learned is enough. Later found that I was wrong, the broad-scale is not comprehensive.

The truly comprehensive coverage of the Web front-end knowledge system is--the browser kernel--it doesn't mean you have to learn more about the browser kernel and make a browser. A browser is a platform for web front-end code to run, and what modules are in the browser kernel and what we need to learn. Not to mention the details, and then have the opportunity to share.

Take care of beginners here. Beginners CSS Friends, a beginning to learn the basics of CSS must have learned padding,border and margin, that is, the inner margin, border, margin. The three of them constituted a "box". Just like we received The courier, originally bought a small iphone, received really so big a box. Because there is an interval between the iphone's white box and the iphone machine (the inner margin), the iphone's white case has a thickness, although it is thin (bezel), and there is a layer of foam (margin) between the box and the Courier box. This is a typical box.

　　

For example, the real content is these words, the outside of the text has a 10px padding, 5px of the border,10px margin. You see the box?

3. Width of box 3.1. Set the fixed width of the case

In the face of this problem, I suggest that before querying various materials, it is better to do one's own experiment:

　　

For example, we can use the tool to measure the width of the text content after we get the page effect. found that the width of the text content is just 300px, is the width we set.

Therefore, in the box model, the width we set is the width of the content, not the width of the whole box . The width of the whole box is: (Content width + border Width + padding width + margin width). In this way we change the width of the box by changing one of the four. It's not friendly for us.

It doesn't matter, this thing is not friendly long ago someone found out, and has been resolved, the following again.

3.2. In case of full parent container

By default, the Display:block of the Div, the width fills the entire parent container. Such as:

　　

But don't forget, this div is a box model, its entire width includes (content width + border Width + padding width + margin width), the entire width is full of the parent container.

The problem is here. If the parent container width is constant, we manually increase the width value of one of the margin, border, or padding, resulting in a decrease in the content width. In extreme cases, if the width of the content is compressed to no longer compress (for example, the width of a word), then the browser forces the width of the parent container to be increased. This is not what we want to see.

3.3. In case of package contents

In this case, the width of the content is calculated according to the content, and the width of the box increases (padding width + border width + margin width) on the basis of the content width.

　　

4. Look at the width of the box again

As mentioned earlier, the width of the box model is set, and the result is only the width of the content, which is unreasonable. How to solve this problem? The answer is:box-sizing:border-box

　　

For example, when the div is set to Box-sizing:border-box , the width of the 300px is the width of the content + border + border (excluding margin), which is more in line with our actual requirements.

We recommend that when you write CSS for the system, the first style is:

The famous bootstrap also added Box-sizing:border-box to its * selector, why don't we do it?

5. Overlap of vertical margin

Margin is mentioned here, which has to mention the feature of margin--vertical overlap. If the longitudinal margin of,<p> is 16px, what is the longitudinal distance between two <p>?

As it should be, it should be 32px, but the answer is still 16px. Because the vertical margin will overlap, the large will be small "eat"(You can experiment).

6. Use div to draw "triangle"

"Triangle" in the daily Web page is very common, such as Baidu home:

　　

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

　　

You can certainly use the background image, fontawesome to achieve this effect, but you can also use DIV to achieve this effect, very simple, and can encapsulate generic:

7. Summary

In this section we use a small space to explain the box model of the relevant knowledge, more suitable for beginners, but more suitable for those who do not have the system to learn the CSS of experienced developers, or that sentence: suggest that everyone system of learning knowledge system.

We will continue this part, say float.

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

Welcome to my Tutorial:"From design to Mode" " deep understanding of JavaScript prototype and closure series " "Microsoft petshop4.0 Source Interpretation Video" "Json2.js Source Interpretation video"

Also welcome to my open source project-Wangeditor, a simple and easy-to-use web Rich Text editor

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

CSS know how much (7)--Box model