Thoroughly understand the CSS box mode (Quick Start to Div layout)

ArticleDirectory

• Preface
• Understanding the CSS Box Model
• Change our thinking
• Separation of Structure and Performance
• Familiar with Workflow

Original article: http://www.hsptc.com/css2.html
Http://www.hsptc.com/articles/index.html

Thoroughly understand the CSS box mode (div layout Quick Start) Preface

Author: Tang Guohui TianyaCommunityNickname of the classic Forum: webflash

If you want to try to typeset web pages without using tables, you can use CSS to typeset your web pages, that is, you can often use Div to orchestrate your web page structure, or you want to learn about the standard design of web pages, or your boss wants you to change the traditional form layout mode to improve the competitiveness of enterprises, one of the things you must understand is the CSS box mode, which is the core of Div layout, traditional table formatting uses different sizes of tables and nested tables to locate typographical web content. After CSS formatting is used, the webpage is organized by nesting boxes and boxes of different sizes defined by CSS. This is because the web page is formatted in this way.CodeIt is concise, easy to update, and compatible with more browsers. For example, PDA devices can also be browsed normally, so it is worthwhile to discard the favorite table layout, more importantly, the advantages of CSS typographical web pages are far more than that. I will not mention them here. I can search for relevant information myself.

Understanding the CSS Box Model

What is the CSS box mode? Why is it a box? First, let's talk about the attribute names that we often hear in web design: content, padding, border, and margin all have these attributes.CSS box modeThese 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. Then the content is what is installed in the box, and the filling is the foam or other anti-seismic accessories added for fear of damage (valuable) in the box; the border is the box itself; as for the boundary, it means that the boxes cannot be all stacked together. Leave some gaps to maintain ventilation, and at the same time to facilitate the removal. 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 only has the width attribute. It can be understood as the thickness of the anti-seismic auxiliary material in the living box, while the border has big and small colors, 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. In real life, suppose we place boxes of different sizes and colors in a certain gap and order on a square, and finally look down over the square, the figure and structure we see are similar to the web page design we have to do, as shown in.Web page layout piled up by a box

How much do I understand the CSS box mode? If it is not thorough enough, I will give an example later and explain it with the concept of a box.

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 writeProgramImplement Dynamic calling to enable the website to dynamically change its style.

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? For example, p is a structured tag, where p labels indicate that this is a paragraph block, and margin is a performance attribute. I want to indent a paragraph to a 2-character high, some people may think of adding spaces and then constantly adding spaces, but now you can specify a CSS style for the p Tag: P {text-indent: 2em ;}, in this way, the content of the result body is as follows, without any labels for performance control:

<P> I have been in Tianya community for a while, but I have never been able to write something. Today I wrote an article about CSS layout, and strive to illustrate knowledge points through a popular language, with examples and images, I believe it will help beginners who are new to CSS layout. </P>

If you want to add font, font size, background, line spacing, and other modifiers to this section, simply add the corresponding CSS to the P style. You don't need to write it like this:

<P> <font color = "# ff0000" face = ""> section content </font> </P>

This is written in combination with the structure and performance. If many paragraphs have a unified structure and performance, it will be tedious to accumulate and write the code.

Directly list a piece of code to further understand the separation of structure and performance:
CSS layout

<Style type = "text/CSS">
<! --
# Photolist IMG {
Height: 80;
Width: 100;
Margin: 5px auto;
}
-->
</Style> <Div id = "photolist">





</Div>

CSS formatting is not required

The first method is to separate the structure, and the content part of the code is simple. If there are more image lists, the first CSS layout method is more advantageous, let me give a metaphor. You can understand: I introduce a person to you in the body. I only tell you that he is a person. As for what kind of person he is, how tall is he, you can check it out in CSS. In this way, my work in the body is simple, that is, the code of the body is simple. If there is a team member in the body, I can record one item in CSS. This is a bit like the concept of components and instances in Flash software. Different instances share the same component, in this way, the animation file is not big. Moving this idea to CSS webpage design means that the Code is not complex and the size of the webpage file can be quickly downloaded by the client. Demo address: http://www.hsptc.com/css1.htmlReduce the size of webpage files by CSS layout

The layout I made above is divided into four blocks. The framework of each block is the same. The framework is written in CSS and the style is written once, it can be called countless times (using class instead of ID), and as long as the text content in it is changed, numerous sections with a uniform style can be generated, its style and structure code is (please do not directly copy and generate a webpage, paste the following code into the webpage 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>
<Div class = "mainbox">
<H3> preface <P> body content </P>
</Div>
<Div class = "mainbox">
<H3> CSS box mode <P> body content </P>
</Div>
<Div class = "mainbox">
<H3> change your mind <P> body content </P>
</Div>
<Div class = "mainbox">
<H3> procedure <P> body content </P>
</Div>

Familiar with Workflow

Before we really start working, we need to develop the idea: I don't know what a table is. In the content section, I cannot make it appear with a performance control label, for example: labels such as font, color, height, width, and align cannot appear again (simply put, brainwashing is done before work, forgetting previous practices, and accepting and using new methods ), I don't simply use Div to implement nesting of layout. Div is a block-level element, and P is also a block-level element. For example, I want to separate several text content blocks, it is not necessary to use Div to call Div layout, it is not "<div> text block 1 </div> <div> text block 2 </div> <div> text block 3 </div> ", it is more appropriate to use "<p> text block 1 </P> <p> text block 2 </P> <p> text block 3 </P>.

The design idea of using Div + CSS is as follows: 1. use Div to define the semantic structure; 2. then, use CSS to beautify the webpage, such as adding the background, Line border, and alignment attributes. 3. finally, add content, such as text and images, to the box defined by CSS (without the label of the performance attribute). Let's take an example with me to further understand this step. First view result diagram: Demo address: http://www.hsptc.com/css2.htmlCSS typographical result

1. Use Div to define the Semantic Structure

Now I want to show you a typical layout partition structure, that is, the page header, navigation bar, content, copyright (for example ),Typical layout partition structureThe Structure Code is as follows:

<Div id = "Header"> </div>
<Div id = "nav"> </div>
<Div id = "content"> </div>
<Div id = "footer"> </div>

We have defined four boxes above. the result we want is that we want these boxes to be equal to width and arranged neatly from bottom to bottom, and then align them in the center of the whole page for convenience of control, then we put the four boxes into a larger box, which is the body, and the code becomes:

<Body>
<Div id = "Header"> </div>
<Div id = "nav"> </div>
<Div id = "content"> </div>
<Div id = "footer"> </div>
</Body>

The large box with the outermost side (the big box with a small box) is like:

Body {
Font-family: Arial, Helvetica, sans-serif;
Font-size: 12px;
Margin: 0px auto;
Height: auto;
Width: 760px;
Border: 1px solid #006633;
}

For the sake of simplicity, we only need to apply a background image to the entire block, and set a gap between the bottom boundary design, the purpose is to prevent the page header image from being connected to the navigation bar below, which is also for the sake of appearance. The style code is as follows:

# Header {
Height: 100px;
Width: 760px;
Background-image: url(headpic.gif );
Background-repeat: No-Repeat;
Margin: 0px 0px 3px 0px;
}

In the navigation bar, I create small buttons. Moving the mouse up will change the background color and font color of the buttons. Then, we can understand these small buttons as small boxes. 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 {
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 is mainly included in the content of the article, including the title and paragraph. The title is bold. In order to normalize the content, I use the H tag. The paragraph must be automatically Indented by two characters in the first line, at the same time, all content seems to be at a certain distance from the border of the outer large box. Fill in the content here. 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;

In the copyright bar, add a background to the page header. The text in the page must be automatically centered and aligned. When there are multiple lines of content, the line spacing is appropriate. The link style here can also be specified separately, I will not do it here. The style code is as follows:

# Footer {
Height: 50px;
Width: 740px;
Line-Height: 2em;
Text-align: center;
Background-color: #009966;
Padding: 10px;
}

Finally, you will see the style code at the beginning of the style:

*{
Margin: 0px;
Padding: 0px;
}

The wildcard is used to initialize the boundaries and fill of each tag (because some tags have certain boundaries by default, such as form tags), then you do not need to control each tag, this can simplify the code to a certain extent. The code for final completion of all styles is as follows:

<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 {
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 as follows:

<Body>
<Div id = "Header"> </div>
<Ul id = "nav">
<Li> <a href = "#"> first page </a> </LI>
<Li> <a href = "#"> chapter </a> </LI>
<Li> <a href = "#"> album </a> </LI>
<Li> <a href = "#"> blog </a> </LI>
<Li> <a href = "#"> discussion </a> </LI>
<Li> <a href = "#"> help </a> </LI>
</Ul>
<Div id = "content">
<H3> preface <P> content of the first paragraph </P>
<H3> understand the CSS box mode <P> section 2 </P>
</Div>
<Div id = "footer">
<P> about Hua Sheng | advertisement service | Hua Sheng recruitment | Customer Service Center | Q message | website management | member logon | shopping cart </P> <p> copyright 2006-2008 Tang Guohui. all rights reserved </P>
</Div>
</Body>

Now, this article is over. For more information, such as box width calculation in CSS, browser compatibility, and XHTML standardized writing, please refer to other materials. If you think this article is okay, remember to follow the post after reading it. Your encouragement is the motivation for me to keep writing new articles ^-^

All rights reserved. Thank you for your transfer. Just enter the author for the transfer! Author: Tang Guohui