Recommended thoroughly understand the CSS box pattern (div layout QuickStart) 1th/3 Page _ Experience Exchange

Author: Tang
Instance Web site: http://www.hsptc.com/css2.html
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.
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>

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.
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click here to open new Window\nctrl+mouse Wheel to zoom in/out ';} ' Border=0>

Pages stacked by "box"

Now how much of the CSS box mode understanding, if not thorough enough, continue to look down, I will give an example in the following, and the concept of the box to explain it.
change our thinking.
The traditional front page design is done in this way: according to the requirements, first consider the main color, what type of pictures to use, what font, color, and so on, and then use photoshop such software free to draw out, and finally cut into small maps, no longer free to design HTML page to create, instead of CSS layout, We're going to change this idea, and we're thinking about the semantics and structure of the page content, because a strong CSS control of the Web page, and so on, you can easily tune the page you want to style, and CSS layout of another purpose is to make the code easy to read, block clear, strengthen the code reuse, so the structure is very important. If you want to say that my web design is very complex, then can achieve that effect? What I'm going to tell you is, if you can't do it with CSS, the general use of the table is also difficult to achieve, because the control of the CSS is too powerful, by the way is the use of CSS typesetting has a very practical advantage is that if you are a single to do the site, if you use a CSS layout page, To do what the customer is not satisfied with, especially the tone, then the change is quite easy, even you can customize several styles of CSS files for customers to choose, or write a program to implement dynamic invocation, so that the site has a dynamic change style function.
To realize the separation of structure and performance
In the real beginning of the layout of the practice before, and then to understand one thing-the structure and performance of the separation, which also uses the characteristics of CSS layout, structure and performance separation, the code is simple, update is convenient, this is not what we learn the purpose of CSS? For example, P is a structured label, there is a P-label place that says this is a paragraph block, margin is the performance attribute, I want to make a paragraph right indent 2 words high, some people will think of adding spaces, and then constantly add space, but now you can give the P tag to specify a CSS style: p {text-indent: 2EM;}, this result body content is as follows, there is no label with any performance control:

Current 1/3 page 123 Next read the full text