Block-level element-box model, element-Box Model

Block-level element-box model, element-Box Model
Preface

The first week of the intrusion front-end plan is coming to an end, and the CSS authoritative guide is coming to an end. We sincerely recommend that you use a good book that will bring you new insights, such as the box model.

If you want to discuss it, please comment on it and make progress together. What's wrong with it.

 

Introduction Problems

It is said that the most fundamental focus of CSS is the most important one, namely the box model. What is the box model?

 

Basic Concepts

The terms mentioned in this article are listed below. If you have other unfamiliar words in this article, please contact the Internet for help.

1. Normal stream: normal text is displayed from left to right and from top to bottom. This article will discuss the normal stream, and floating and positioning will let the elements leave the normal stream.

2. Non-replacement element: the element content is included in the document, such as <p> and

3. Replace element: use an element as a placeholder for other content, such as .

4. Block-level elements: This article describes some features of block-level elements, starting with the most basic <div> and <p> elements.

5. margin (margin): The default value is 0, which can be a negative number.

6. border (border): no border by default, and the width cannot be negative.

7. padding: The default value is 0 and cannot be a negative number.

8. width: The default value is auto. It cannot be a negative number and is the content width (excluding the padding ).

9. height: The default value is auto. It cannot be a negative number and is the content height (excluding the padding ).

 

Box Model

The first figure is stolen from Baidu encyclopedia.
　　　　　　

This is a great box model. What are the features? You can guess. For the convenience of the following observations, CSS has been hitting something.
　　　　

 

Horizontal format

The horizontal direction has the following relationship:

　　　　　　

There are three attributes that can be set to auto: margin-left, width, and margin-right. Therefore, we will discuss the following situations.
1. Zero auto: In this case, the margin-right will be automatically changed to auto based on an excessively limited principle, with the following effect.
　　　　　　　　　　　　

The result shows that the left margin is PX, and the width is PX, but the right margin is auto. According to the formula, the final value of auto is obtained, which exactly fills the parent width.

2. One auto: No matter which of the three is auto, the corresponding value is calculated to satisfy the above formula.

　　　　　　　

3. two auto: if the two values of margin are auto, the two are equal to each other to satisfy the formula. In this case, the two values are usually used in the center, but they cannot be used. If one of the two values is width and margin, this margin is set to 0.

4. Three auto: At this time, the two margin values are set to zero, and the width value is as wide as possible to satisfy the formula.

There are also some additional points, messy.
1. The margin in the horizontal direction will not be merged, and the vertical direction will be merged, which will be detailed below.

2. percentages can be used for all values, but they are not flexible enough. What should I do if I use them.

3. The outer margin can be a negative number, which still satisfies the formula, but the width is wider than the parent.

4. Block-level replacement element. When width is set to auto, the width will change to the width of the content.

 

Vertical format

There is also a formula that is omnipotent.
The default value of height is auto, which changes with the height of the content. When a height is specified, the height of the reference content is too small or too large. This is very simple, just make up your mind.
Of course, there are also three values, which can be set to auto, margin-top, margin-bottom, and height. When margin is set to auto, It will be set to zero, when the height is set to auto, it will not be said by default.

Outer margin merge

The horizontal direction of block-level elements does not merge the outer margin, but the vertical direction is merged. The effect is as follows.
　　　　

 

Summary

The more you see it, the more boring it is, but you still have to stick to it. Today is Friday, and more than 70 pages are done, but the blog is not written, I am still reading "JavaScript DOM programming art" when I cannot see it in the past few days. I have finished reading it right away. I can borrow two days next week to compensate for this week!