CSS Box mode detailed

Objective

If you want to try the page layout without a table, instead, you can use CSS to format your Web page, which is often used to compose your Web page structure with Div, or you want to learn the standard design of Web pages, or your boss wants you to change the traditional form layout, improve the competitiveness of enterprises, Then you must be exposed to a knowledge point is the CSS box mode, this is the core of Div typesetting, the traditional table layout is through the size of tables and tables nested to locate the content of the layout page, instead of CSS layout, is defined by the size of the CSS box and box nested to arrange the page. Because of the simplicity of the Web page that is formatted in this way, easy to update, can be compatible with more browsers, such as PDA equipment can also be normal browsing, so give up their favorite table layout is also worthwhile, more important is the advantages of CSS typesetting page is far more than these, I do not say here, I can go to find relevant information.

Understanding CSS Box Models

What is the CSS box mode? Why do you call it a box? Let's start with the attribute names we often hear in web design: content, padding (padding), Borders (border), boundaries (margin), and CSS box patterns.

　　

CSS Box mode

These attributes we can transfer to our daily life in the box (box) to understand that the daily life of the box also has these properties, so call it box mode. So the contents are the things in the box; The filling is afraid of the contents of the box (valuable) damage and added foam or other seismic accessories; The border is the box itself; As for the border, the box can not be all piled together, to leave a certain gap to maintain ventilation, but also for easy removal. In web design, the content often refers to words, pictures and other elements, but can also be a small box (div nesting), and real life in the box is different, real life things generally can not be larger than the box, otherwise the box will be propped up bad, and the CSS box is elastic, inside of the box itself up to the maximum size, But it's not going to be damaged. Padding has only width attributes, can be understood as the life of the box in the seismic material thickness, and the border has the size and color of the points, we can understand the thickness of the box in life and the box is made of what color material, the border is that the box and other things to retain how much distance. In real life, suppose we in a square, the different size and color of the box, with a certain gap and order, and finally look down from the square, see the graphics and structure like we want to do the page layout design, the following figure.