It is recommended that you fully understand the CSS box mode (DIV layout Quick Start) page 1/3

Author: Tang Guohui
Instance webpage: http://www.hsptc.com/css2.html
Preface
If you want to try to typeset web pages without using tables, you can use CSS to typeset your web pages, that is, you can often use DIV to orchestrate your web page structure, or you want to learn about the standard design of web pages, or your boss wants you to change the traditional form layout mode to improve the competitiveness of enterprises, one of the things you must understand is the CSS box mode, which is the core of DIV layout, traditional table formatting uses different sizes of tables and nested tables to locate typographical web content. After CSS formatting is used, the webpage is organized by nesting boxes and boxes of different sizes defined by CSS. Because the Web Page code in this way is concise, easy to update, and compatible with more browsers, such as PDA devices, can also be browsed normally, it is worthwhile to discard the favorite table layout, more importantly, the advantages of CSS typographical web pages are far more than that. I will not mention them here. I can search for relevant information myself.
Understanding the CSS Box Model
What is the CSS box mode? Why is it a box? First, let's talk about the attribute names that we often hear in web design: content, padding, border, and margin all have these attributes.

These attributes can be transferred to the box in our daily life for understanding. The box we see in our daily life also has these attributes, so it is called the box pattern. Then the content is what is installed in the box, and the filling is the foam or other anti-seismic accessories added for fear of damage (valuable) in the box; the border is the box itself; as for the boundary, it means that the boxes cannot be all stacked together. Leave some gaps to maintain ventilation, and at the same time to facilitate the removal. In webpage design, content often refers to text, images, and other elements, but it can also be a small box (DIV nesting). Unlike in real life, in real life, things generally cannot be bigger than the box, otherwise the box will be broken, while the CSS box is elastic, and the content inside is bigger than the box itself, but it will not be damaged. Fill only has the width attribute. It can be understood as the thickness of the anti-seismic auxiliary material in the living box, while the border has big and small colors, we can also understand the thickness of the box we see in our lives and the color of the box. The boundary is the distance between the box and other things. In real life, suppose we place boxes of different sizes and colors in a certain gap and order on a square, and finally look down over the square, the figure and structure we see are similar to the web page design we have to do, as shown in.

Web page layout piled up by a box

How much do I understand the CSS box mode? If it is not thorough enough, I will give an example later and explain it with the concept of a box.
Change our thinking
The traditional front-end webpage design is like this: according to requirements, we should first consider the dominant colors, types of images to be used, fonts and colors, and so on, then we can use Photoshop and other software to draw them freely. Finally, we can cut them into small images. We can't design HTML to generate pages freely. After CSS is used, we need to change this idea, at this time, we mainly consider the semantics and structure of the page content, because a webpage with strong CSS control can easily adjust the webpage style you want after the webpage is completed, in addition, the CSS layout aims to make the code easy to read, clear blocks, and enhance code reuse. Therefore, the structure is very important. If you want to say that my webpage design is complex, can you achieve that later? What I want to tell you is that if CSS cannot be used to achieve the effect, it is difficult to use tables, because CSS control capabilities are too powerful, by the way, CSS layout has a very practical advantage: if you are using a single website, and if you are using a CSS layout webpage, what will be unsatisfactory to the customer later, in particular, it is quite easy to change the color. You can even customize CSS files of several styles for customers to choose from, or write a program to achieve dynamic calling, allows websites to dynamically change their styles.
Separation of Structure and Performance
Before getting started with the layout practice, let's take a look at the separation of structure and performance. This also uses the characteristics of CSS layout. After the structure and performance are separated, the code is concise, updating is convenient. Isn't that the purpose of CSS learning? For example, P is a structured tag, where P labels indicate that this is a paragraph block, and margin is a performance attribute. I want to indent a paragraph to a 2-character high, some people may think of adding spaces and then constantly adding spaces, but now you can specify a CSS style for the P Tag: P {text-indent: 2em ;}, in this way, the content of the result body is as follows, without any labels for performance control: