Thoroughly understand one of the CSS box Modes

<Transferred from: http://www.testfans.com/index.php/239/viewspace-353.html>

 

Preface

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 say that your boss wants you to change the traditional form formatting method 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, the traditional layout of a table is to locate the content of a typographical Webpage Through the nesting of tables with different sizes, the webpage is organized by nesting boxes and boxes of different sizes defined by CSS. Because web pages with this layoutCodeIt 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 mode

These 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 piled up when they are placed. 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. For a webpage with strong CSS control, you can easily adjust the webpage style you want after completing the webpage, 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 usually difficult to use tables, because the control capability of CSS is 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 the 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> Add to TianyaCommunityI have been writing something for a while, but I have never been writing something. Today I wrote an article about CSS layout.ArticleAnd strive to use a popular language to describe knowledge points, 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: css1.html
Reduce 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>