Recommended to thoroughly understand CSS box mode (div layout Quick Start) _ Experience Exchange

Objective
If you want to try not to use the form to layout the page, but instead of using CSS to layout your page, that is, often listen to use p to compose your page structure, or you want to learn the standard design of the Web, or your boss wants you to change the traditional form of typesetting, improve the competitiveness of enterprises, Then you must be exposed to a knowledge point is the CSS box mode, which is the core of P typesetting, the traditional form of table layout by the size of tables and tables nested to locate the layout of the page content, instead of CSS layout, is through a CSS defined by the size of boxes and boxes nested to organize the page. Because in this way the layout of the page code is concise, update convenient, can be compatible with more browsers, such as PDA devices can also be normal browsing, so give up their favorite table layout is also worthwhile, more importantly, CSS page advantages far more than these, I do not say more 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 first talk about the property names we often hear in web design: content, padding (padding), Borders (border), boundaries (margin), CSS box patterns.

These properties we can transfer it to our daily life box (box) to understand that the daily life of the box also has these attributes, so call it box mode. Then the content is the contents of the box, and the filling is afraid of things in the box (valuable) damage added foam or other anti-seismic accessories; The border is the box itself; As for the border, the box is not all stacked together, to leave a certain gap to maintain ventilation, but also to facilitate the removal of it. In web design, content often refers to text, pictures and other elements, but also can be small box (p nested), and real life in the box is different, the real life of things can not be larger than the box, or the box will be broken, and the CSS box is elastic, the inside of the box itself is larger than the maximum size, But it's not going to get damaged. Filling only the width of the property, can be understood as the life of the box of seismic accessories thickness, and the border has the size and color of the points, we can understand the life of the box thickness and what the box is made of color material, the border is the box and other things to keep how much distance. In real life, suppose we in a square, the different size and color of the box, with a certain gap and the order of the place, and finally from the square over the look down, see the graphics and structure is similar to what we want to do the page layout design, such as.

A page layout made up of "boxes"

Now how much to understand the CSS box mode, if not thorough enough, continue to look down, I will follow the example, and the concept of the box to explain it.
change our thinking.
The traditional front page design is carried out in this way: according to the requirements, first consider the main color, what type of picture, with what font, color, and so on, and then use Photoshop this kind of software free to draw out, and then cut into small pictures, and then not free through the design of HTML generation page, instead of CSS layout, We want to change this idea, at this time we mainly consider the content of the page semantics and structure, because a strong CSS control of the Web page, and so on, you can easily adjust the page style you want, and the other CSS layout is to make the code easy to read, block clear, strengthen code reuse, so the structure is very important. If you want to say that my web page design is very complex, to later can achieve that effect? I would like to tell you that if you do not use CSS to achieve the results, the general table is also difficult to achieve, because the control of the CSS is too powerful, by the way, there is a very useful CSS layout has a very practical advantage is that if you are to do Web site, if you use a CSS layout page, To do what the customer is not satisfied with, especially the tone, then it is quite easy to change, and even you can customize several styles of CSS files for the customer to choose, or write a program to implement dynamic calls, so that the site has a dynamic change the style of the function.
achieve separation of structure and performance
Before really starting the layout practice, and then come to know one thing-the structure and performance of the separation, which also uses the CSS layout features, structure and performance after separation, the code is concise, update is convenient, this is not the purpose of our learning CSS? For example, p is a structured label, there is a P tag place that is a paragraph block, margin is a performance attribute, I want to make a paragraph right indent 2 characters high, some people will think of adding a space, and then continue to add space, but now you can give the P tag to specify a CSS style: p {text-indent: 2EM;}, so the result body content part is as follows, this does not have any performance control tag:
If you want to add font, font size, background, line spacing and other modifications to this paragraph, just add the corresponding CSS to the p style, and don't write it like this:

<p><font color= "#FF0000" face= "song body" > Paragraph content </font></p>

This is a mix of structure and performance, if a lot of paragraphs have a unified structure and performance, then this accumulation of writing code is cumbersome.
Then direct a piece of code to deepen the understanding of the structure and the performance phase separation:
Layout with CSS

<style type= "Text/css" >
<!--
#photoList img{
height:80;
width:100;
MARGIN:5PX Auto;
}
-
</style> <p id= "Photolist" >





</p>

No CSS layout

The first method is the structure of the separation, the content part of the code is simple, if there are more picture list, then the first CSS layout method is more advantageous, I make a metaphor you understand: I introduce a person in body, I only say to you he is a person, as to what he is a person, how high, is a male or female, you go to CSS there to check down to know. So my work on the body is simple, that is, the body code is simple. If the body has a team of people there, I am in the CSS record an item on the line, which is a bit like the Flash software in the concept of components and instances, different instances share the same component, so the animation file is not much, the idea of moving to CSS Web page design, is the code is not complex, The small size of the Web page file can be downloaded by the client quickly.

Reduce page file volume with CSS layout

Like above I do that section, altogether divides into four blocks, each block frame is the same, this frame is writes out with the CSS, the style writes once, can be called many times (with class calls, not the ID), as long as changes the text content can produce the style unification many plates, Its style and structure code is (please do not copy the generated page directly, paste the following code into the page where they should be):

<style type= "Text/css" >
<!--
* {margin:0px; padding:0px;}
Body {
font-size:12px;
margin:0px Auto;
Height:auto;
width:805px;
}
. mainbox {
border:1px dashed #0099CC;
margin:3px;
padding:0px;
Float:left;
height:300px;
width:192px;
}
. mainbox H3 {
Float:left;
height:20px;
width:179px;
Color: #FFFFFF;
padding:6px 3px 3px 10px;
Background-color: #0099CC;
font-size:16px;
}
. Mainbox P {
Line-height:1.5em;
Text-indent:2em;
margin:35px 5px 5px 5px;
}
-
</style>
<p class= "Mainbox" >
<p> Body Content </p>
</p>
<p class= "Mainbox" >
&LT;H3&GT;CSS Box Mode <p> Body Content </p>
</p>
<p class= "Mainbox" >
<p> Body Content </p>
</p>
<p class= "Mainbox" >
<p> Body Content </p>
</p>

Familiar with work flow
Before we really get to work, we have to think of the idea of what the table is: I don't know, in the content Part I can't let it show the control label again, such as: font, color, height, width, align and other tags can no longer appear, (simply say before work, brainwashing, Forget the previous practice, to accept and use the new method), I am not purely to use p to achieve the nesting of the composition, p is block-level elements, and like P is also block-level elements, such as to separate a few text content block, not necessarily with P is called P typesetting, not "<p> block one </p> <p> Text Block two </p><p> text block three </p> "instead of" <p> text block one </p><p> text block two </p><p> text block three </p> "more suitable.
The idea of using P+CSS is this: 1. Use p to define the semantic structure, 2. Then use CSS to beautify the Web page, such as adding backgrounds, line borders, alignment attributes, etc. 3. Finally, add content to this CSS-defined box, such as text, images, etc. (No labels that show attributes), Now let's do an example with me to deepen our understanding of this step. First look at the result diagram:

Demo Address: http://www.php.cn/

CSS Layout result diagram

Use p to define the semantic structure
Now I want to show you a typical layout of the column structure, that is, the page header, navigation bar, content, copyright (such as),

Typical layout of the column structure

Its structure code is as follows:

Copy the Code code as follows:

<body>
<p id= "Header" ></p>
<p id= "NAV" ></p>
<p id= "Content" ></p>
<p id= "Footer" ></p>
</body>

The outermost big box (large box with small box) we want it to be centered on the page and redefine its width to 760 pixels, plus the border, then its style is:

Copy the Code code as follows:

Body {
Font-family:arial, Helvetica, Sans-serif;
font-size:12px;
margin:0px Auto;
Height:auto;
width:760px;
border:1px solid #006633;
}

Header for the sake of simplicity, we here just let it apply a background map of the entire block, and in its lower boundary design a certain gap, the purpose is to make the page header image and the following to do the navigation bar together, this is also for the sake of beauty. Its style code is:

#header {
height:100px;
width:760px;
Background-image:url (headpic.gif);
Background-repeat:no-repeat;
margin:0px 0px 3px 0px;
}

Navigation bar I made like a small button, the mouse move will change the button background color and font color, then these small buttons we can understand as a small box, so that this is a box nesting problem, the style code is as follows:

#nav {
height:25px;
width:760px;
font-size:14px;
List-style-type:none;
}
#nav Li {
Float:left;
}
#nav Li a{
Color: #000000;
Text-decoration:none;
padding-top:4px;
Display:block;
width:97px;
height:22px;
Text-align:center;
Background-color: #009966;
margin-left:2px;
}
#nav Li a:hover{
Background-color: #006633;
Color: #FFFFFF;
}

Content part mainly into the content of the article, there are headings and paragraphs, the title bold, in order to standardize, I use H tags, paragraph to automatically achieve the first line indentation 2 words, while all the content looks and the outer large box border has a certain distance, here with padding. The content block style code is:

#content {
Height:auto;
width:740px;
Line-height:1.5em;
padding:10px;
}
#content p {
Text-indent:2em;
}
#content H3 {
font-size:16px;
margin:10px;

The copyright bar, give it a background, with the page, the text to automatically center alignment, there are multiple lines of content, the line spacing is appropriate, here the link style can also be specified, I do not here. Its style code is as follows:

#footer {
height:50px;
width:740px;
Line-height:2em;
Text-align:center;
Background-color: #009966;
padding:10px;
}

Finally back to the beginning of the style you will see this style code:

* {
margin:0px;
padding:0px;
}

This is the use of wildcards to initialize each label boundary and fill, (because some of the tags default to have a certain boundary, such as the form tag) then you do not have to control each label again, this can be to some extent simplifying the code. The final completion of the full style code is this:

<style type= "Text/css" >
<!--
* {
margin:0px;
padding:0px;
}
Body {
Font-family:arial, Helvetica, Sans-serif;
font-size:12px;
margin:0px Auto;
Height:auto;
width:760px;
border:1px solid #006633;
}
#header {
height:100px;
width:760px;
Background-image:url (headpic.gif);
Background-repeat:no-repeat;
margin:0px 0px 3px 0px;
}
#nav {
height:25px;
width:760px;
font-size:14px;
List-style-type:none;
}
#nav Li {
Float:left;
}
#nav Li a{
Color: #000000;
Text-decoration:none;
padding-top:4px;
Display:block;
width:97px;
height:22px;
Text-align:center;
Background-color: #009966;
margin-left:2px;
}
#nav Li a:hover{
Background-color: #006633;
Color: #FFFFFF;
}
#content {
Height:auto;
width:740px;
Line-height:1.5em;
padding:10px;
}
#content p {
Text-indent:2em;
}
#content H3 {
font-size:16px;
margin:10px;
}
#footer {
height:50px;
width:740px;
Line-height:2em;
Text-align:center;
Background-color: #009966;
padding:10px;
}
-
</style>

The structure code is this:

<body>
<p id= "Header" ></p>
<ul id= "NAV" >
<li><a href= "#" > Home </a></li>
<li><a href= "#" > Articles </a></li>
<li><a href= "#" > Albums </a></li>
<li><a href= "#" >Blog</a></li>
<li><a href= "#" > Forum </a></li>
<li><a href= "#" > Help </a></li>
</ul>
<p id= "Content" >
<p> First paragraph content </p>
<p> Second paragraph content </p>
</p>
<p id= "Footer" >
<p> about Huasheng | Advertising Services | China Promotion Recruitment | Service Center | Q Q Message | Website Management | Member Login | Shopping cart </p><p>copyright 2006-2008 Tang Guohui. All Rights reserved</p>
</p>
</body>

Well, this article to the end, more content, such as: CSS box width calculation, browser compatibility issues, XHTML normalization, etc. please refer to other information. If you think this article can also, read after the thread, your encouragement is I constantly out of the power of the new article ^-^

