Get a thorough understanding of CSS box patterns (div layout QuickStart)

css| Quick Start

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.

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 this: 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, and finally cut into small pictures, No longer free through the design of HTML generated pages, instead of CSS layout, we want to change the idea, at this time we mainly consider the content of the page's semantics and structure, because a strong CSS control of the Web page, and so do a good page, you can easily tune the style of the page you want, Moreover, the other purpose of CSS typesetting is to make the code easy to read, block clear, and enhance the reuse of code, 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. < p>

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:

<p> added to Tianya for some time, but there has been no time to write something, today wrote an article on CSS layout, and strive to pass a popular language to illustrate the point of knowledge, but also with the example and pictures, I believe that the beginner CSS layout of the people will bring certain help.

If you want to add the font, font size, background, line spacing, and so on, just add the corresponding CSS to the P-style, do not have to write like this:

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

This is the structure and performance mix written together, if a lot of paragraphs have a unified structure and performance, then add to write the code is cumbersome.

A second line of code to deepen understanding of structure and performance phase separation:
Layout with CSS

The following is a reference fragment:
<style type= "Text/css" >
<!--
#photoList img{
height:80;
width:100;
MARGIN:5PX Auto;
}
-->
</style> <div id= "Photolist" >





</div>

No CSS Typesetting

The following is a reference fragment:

The first method is the separation of the structure performance, the content part of the code is simple, if there are more pictures list, then the first CSS layout method has more advantages, I would like to say hello to understand: I introduce you to a person in the body, I only told you he is a person, as to what he is a person, how high, Is the male is the female, you go to the CSS to check down to know. So I work in the body is simple, that is to say the body code is simple. If the body has a team of people there, I log in a CSS on the line, which is a bit like the Flash software components and instances of the concept of different instances of sharing the same component, so that the animation file is not big, the idea of moving to the CSS web design, that is, the code is not complex, The small size of the Web page file can be downloaded faster by the client. Demo Address: http://www.hsptc.com/css1.html with CSS layout to reduce the volume of Web page files

Like the top I made the layout, divided into four blocks, each block frame is the same, the framework is written with CSS, style write once, you can be called countless times (with class call, rather than ID), as long as the change in the text content can generate a unified style of many plates, Its style and structure code is (please do not copy the generated pages directly, and paste the following code into the page where they should be):

The following is a reference fragment:
<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 h5 {
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>
<div class= "Mainbox" >
<p> Body Content </p>
</div>
<div class= "Mainbox" >
&LT;H5&GT;CSS Box Mode <p> Body Content </p>
</div>
<div class= "Mainbox" >
<p> Body Content </p>
</div>
<div class= "Mainbox" >
<p> Body Content </p>
</div>

Familiar with work flow
Before we actually get to work, we're going to have this idea in mind: what is a table? I don't know, in the Content section I can't let it appear control label, such as: font, color, height, width, align and other labels can not appear again, (simple to say before work brainwashing, Forget about previous practices, accept and use new methods. I am not simply using div to achieve layout of the nesting, Div is block-level elements, and like P is block-level elements, such as to separate a few pieces of text content, not necessarily to use Div is called div typesetting, not "<div> text block A </div><div> Text block two </div> <div> text block three </div> "while using" <p> text block one </p><p> text block two </p><p> text block three </p> "more appropriate."

The idea of designing with DIV+CSS is this: 1. Use div to define the semantic structure; 2. Then use CSS to beautify the page, such as adding background, line border, alignment properties, etc. 3. Finally, add content to this CSS-defined box, such as text, pictures, etc. (no label for performance attributes), Now let's do an example with me to deepen our understanding of this step. Look at the result chart first:

Demo Address: Http://www.hsptc.com/css2.htmlCSS Typesetting result chart

1. Use div to define semantic structure

Now I want to show you a typical layout column structure, that is, the page header, navigation bar, content, copyright (pictured below), the typical layout of the structure of the column structure code as follows:

The following is a reference fragment: <div id= "Header" ></div> <div id= "NAV" ></div> <div id= "Content" ></div> <div id= "Footer" ></div>

We've defined four boxes above, and according to the results we want, we want these boxes to be wide, and to arrange them from bottom to bottom, and then to center the whole page, and in order to be easy to control, we'll put these four boxes in a larger box, which is the body, so the code becomes:

The following is a reference fragment: <body> <div id= "Header" ></div> <div id= "NAV" ></div> <div id= "Content" ></div> <div id= "Footer" ></div> </body>

The outermost big box (the big box with the small box) we want to center the page, and redefine its width of 760 pixels, plus the border, then its style is:

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

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

The following is a reference fragment: #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 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:

The following is a reference fragment: #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; }

The content part mainly puts in the article content, has the title and the paragraph, the title is bold, in order to standardize, I use the H label, the paragraph wants to automatically realize the first line indent 2 words, simultaneously all content looks wants and the outer big box border to have certain distance, here uses fills. The content block style code is:

The following is a reference fragment: #content { Height:auto; width:740px; Line-height:1.5em; padding:10px; } #content p { Text-indent:2em; } #content h5 { font-size:16px; margin:10px;

Copyright Bar, to add a background, with the page, the text to automatically center alignment, there are more than one line of content, line spacing appropriate, here's the link style can also be designated separately, I do not do here. The style code is as follows:

The following is a reference fragment: #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:

The following is a reference fragment: * { margin:0px; padding:0px; }

This is the use of wildcard initialization of the label boundaries and padding, (because some of the labels by default will have a certain boundary, such as form label) then do not have to control each label again, which can simplify the code to some extent. The final complete style code is this:

The following is a reference fragment: <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 h5 { 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 like this:

The following is a reference fragment: <body> <div id= "Header" ></div> <ul id= "NAV" > <li><a href= "#" > Home </a></li> <li><a href= "#" > Articles </a></li> <li><a href= "#" > Album </a></li> <li><a href= "#" >Blog</a></li> <li><a href= "#" > Forum </a></li> <li><a href= "#" > Help </a></li> </ul> <div id= "Content" > <p> the first paragraph content </p> <p> the second paragraph content </p> </div> <div id= "Footer" > < p> About Us | Advertising Services | Huasheng Recruitment | Service Center | Q Q Message | Website Management | Member Login | Shopping cart </p>< p>copyright©2006-2008 Tang Guohui. All Rights reserved</p> </div> </body>

Well, here's the end of the article, more, such as: Box width calculation in CSS, browser compatibility issues, XHTML standardization, etc. please refer to other information. If you think this article can also, read after remember the thread, your encouragement is I keep out of the power of the new article ^ ^