Front-end: Try to understand the CSS box model from a new perspective (1) and understand css in Depth

Front-end: Try to understand the CSS box model from a new perspective (1) and understand css in Depth

CSS style rules are tedious and boring to learn, because they do not have basic concepts, basic principles, or rules like physics, mathematics, or other programming languages, all other performances are logical games with concepts under these kilometers or rules. CSS has some basic concepts, however, it does not tell you a few rules and all the results are freely combined under these rules. You need to determine how a style declaration block is displayed on the page, you come up with a very small amount of logical reasoning. The vast majority of them are what kind of performance you know and remember. This is also because the combination of styles is too complicated and complicated. Similar concepts, the performance of margin in block level is different from that in line, even the margin performance in different directions of block-level elements is different, and even in the same direction of block-level elements, some attributes of the parent element have different performance, and floating positioning is another situation. It is even more annoying to consider the compatibility of different browsers, it is impossible to have one or more rules to express your logic reasoning style, understanding CSS style rules only involves a variety of combinations and remembering their performances (although there may be a small logical reasoning ), therefore, the frontend profession feels that work experience is more important than other programming languages.

The result of mastering a language is that a clear context map of the knowledge system can be formed in the mind. However, it is difficult for CSS to learn a clear logical line cyclically and incrementally, because its conceptual relevance is too weak, it is necessary to better understand existing concepts, such as the box model, when there is no clear logic to help you understand them.

The box model and related knowledge points play a very important and core position in CSS. What we often hear is the classic understanding of the box model, which is a box analogy. The box itself is border, the goods in the box are the content, the fill is the padding, and the distance between the boxes is margin. This analogy has its advantages, but it still feels like it is not said (at least I think so ). In addition, this analogy virtually regards padding and content as the content of tag elements, and regards margin as something other than content. It feels that this will cause some deviations in understanding the nature of css layout, the most obvious example is that beginners will not realize that the width and height specified by width and height are the width and height of the content (css3 adds a new attribute to change the specified range of width and height ), we do not calculate padding, border, and margin together. So now I don't want to understand the content, padding, border, and margin in a box. It is also possible to understand it from a perspective that is not a box model (but it may vary from person to person) this helps to avoid the misunderstanding of the box model analogy.


When you first contact the front-end, you will see the following: html Tag page content, css display page style, javascript control page behavior. This means that the content of a page is marked with html tags. A content must be marked with an html Tag. css achieves separation of performance and content, that is to say, css adds various styles to the page content, and its operation goal is content. Therefore, the concept of CSS is discussed from the content rather than the box.

When you open a webpage, you can find that the content range of the page is text, form-related (input box, button, single button, check box, drop-down box), image, audio, and video. The content is placed in a rectangle area, that is, the content area. The width and height attributes of the area are width and height, outside the content area, the tag elements form additional space for layout.
There are two types of html tags that mark the content: replacement element and non-replacement element.
Replacement element: All the above except the text are replacement elements. The replacement element means that the label element occupies a seat for a specific content and cannot be seen in the original html code. Image, audio, and video tags point to an image file, audio file, or video file. A placeholder tag is a replacement element.
Non-replacement element: the content marked by the tag element can be seen in the original html code. It is better to use the text marked by the span tag. The span tag that marks the text is a non-replacement element.

Because there is always a label in the content to mark it, and the rendering result of the label in the browser is to turn a rectangular area around the content (in CSS3, it can be set as a non-rectangular area ), this rectangular area generates additional space around the content, and there are three types of extra space: padding (inner margin), border (border), and margin (outer margin ). In normal document streams, most css la s are implemented by setting padding, border, and margin.

The padding space is a colorless and transparent area between the border and the content area. The background color of the element can be seen in this area and the area cannot be merged without border and margin.
The border space is an area with built-in styles and colors between the inner margin and the outer margin. This area is also drawn on the background color, therefore, if the border is hollow out, you can see the background color.
The margin space is a colorless and transparent area outside the border. the background color of the parent element can be seen in this area and the area can be merged vertically in the normal stream, there is no merging rule in the horizontal direction.

By default, the preceding three regions do not exist.

Although each element is rendered to a rectangle area around the content, the type of the rectangle area rendered by different elements may be different by default. You can switch between different types of Rectangular areas by setting display. A standard for classification of Rectangular areas is to check whether there is a line break before and after the rectangle area: the rectangular areas with line breaks before and after are block-level Rectangular areas; the rectangular areas without line breaks before and after are in the line rectangular area. The elements corresponding to the corresponding rectangular areas of different categories are also called block-level elements or intra-row elements. Line breaks are only a distinction between block-level and intra-line characters. They are not all different. They also have some differences in the default status and changing behavior.
By default, multiple block-level elements are vertically arranged in a document stream. The width of the block-level elements is the content area width of the parent element, and the height of the content area is the height of the content area, you can freely change the width and height of your content zone. The elements in multiple rows are arranged horizontally. The width and height of each row are the width and height of the content area, and the width and height of the content area cannot be set.


In this way, the content marked by a tag is represented in four parts: content area, padding, border, and margin from the inside out. These four parts are closely linked, and put it in a layout context as a whole, and place it based on the layout context. The layout context is the content area of the parent element. This content area may be in a block-level element or in a row element. In general, the content of each label can be placed from left to right in the order from left to right, and cannot be placed from left to right (like exceeding or having a line break) it is placed in the order from top to bottom. If an element label is in this order, it is said that the label is in the Document Stream. Only floating and positioning will get rid of this constraint. In this case, elements are separated from the document stream.