What is the CSS box model?

The W3C organization recommends that all objects on Web pages be placed in a box. Designers can create definitions to control the attributes of this box, these images include paragraphs, lists, titles, images, and layers. The box model mainly defines four areas: content, padding, border, and margin ). Levels, relationships, and mutual influences among margin, background-color, background-image, padding, content, and border. Box Model.

 

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. Content is the content in the box, and padding is the foam or other anti-seismic auxiliary materials added for fear of damage to the content in the box; the border (Border) is the box itself; as for the border (margin), it means that when the box is placed, it cannot be all stacked together. leave a gap to keep it ventilated, at the same time, it is also for convenience. 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 and border only have the width attribute. It can be understood as the thickness of the anti-seismic auxiliary material in the living box, while the border has a large size and color, and each border can be defined with different styles. 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.
Width and height define the width and height of the content part rather than the height of the entire box. This is a common mistake for beginners. The width of padding border margin is added to the outside in sequence. The background is filled with the padding and content sections. However, due to browser design issues, different browsers may have different display effects. When the left and right margin doubles, when the box is float, the left and right margin of IE6 doubles.
The W3C defines the flat box mode as follows:

　　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?