It is recommended to thoroughly understand CSS box mode (quick start with DIV layout)

Foreword
If you want to try not to use tables to layout web pages, but to use CSS to layout your web pages, which is often heard of using p to layout your web page structure, or you want to learn web pages Standard design, or your boss wants you to change the traditional table layout method to improve corporate competitiveness, then one knowledge point you must be exposed to is the CSS box mode. This is the core of p layout, the traditional table Typesetting is to position and typeset web page content through tables and table nesting of different sizes. After switching to CSS typesetting, web pages are arranged through boxes and box nesting of different sizes defined by CSS. Because the code of web pages typed in this way is simple, easy to update, and can be compatible with more browsers, such as PDA devices, it can also be browsed normally, so it is worthwhile to give up the table typesetting that I loved before. More importantly, CSS typesetting of web pages The advantages are far more than these. I won’t go into details here. You can find relevant information by yourself.
Understanding the CSS box model
What is the CSS box model? Why is it called a box? Let’s first talk about the attribute names we often hear in web design: content, padding, border, and margin. CSS box mode all has these attributes.

We can understand these attributes by transferring them to the boxes (boxes) in our daily life. The boxes we see in our daily life also have these attributes, so it is called the box pattern. Then the content is what is in the box; the filling is the foam or other earthquake-resistant auxiliary materials added to prevent the contents (valuable) from being damaged; the border is the box itself; as for the border, it means that the box cannot be placed when it is placed. Stack them all together, leaving a certain gap for ventilation and for easy removal. In web design, content often refers to text, pictures and other elements, but it can also be small boxes (p-nested). Different from boxes in real life, things in real life generally cannot be larger than the box, otherwise the box will be stretched Broken, and the CSS box is elastic. The things inside are larger than the box itself and will stretch it at most, but it will not be damaged. The filling only has the width attribute, which can be understood as the thickness of the anti-seismic auxiliary materials in the boxes in life, while the border has size and color, which can be understood as the thickness of the boxes we see in life and what color materials the box is made of. The boundary is the distance between the box and other things. In real life, suppose we are in a square and place boxes of different sizes and colors at certain intervals and in a certain order. Finally, when we look down from the square, we will see graphics and structures similar to what we want to do. The web page layout is designed, as shown below.

Web page layout piled up by "boxes"

How much do you understand the CSS box pattern now? If it is not thorough enough, continue reading. I will give examples later and use the concept of boxes to explain it.
Change our thinking
The traditional front-end web design is carried out like this: according to the requirements, first consider the main color, what type of pictures to use, what fonts and colors to use Wait, and then use software like Photoshop to freely draw it, and finally cut it into small pictures, and no longer freely design HTML to generate pages. After switching to CSS for layout, we have to change this idea. At this time, our main consideration is The semantics and structure of the page content, because of a web page with strong CSS control, you can easily adjust the web page style you want after the web page is completed. Moreover, another purpose of CSS layout is to make the code easy to read and the blocks to be clear. , strengthen code reuse, so structure is very important. If you want to say that my web page design is very complicated, will it be possible to achieve that effect later? What I want to tell you is that if the effect cannot be achieved with CSS, it is generally difficult to achieve it with tables, because the control ability of CSS is too powerful. By the way, there is a very practical benefit of using CSS for typesetting. , if you are taking orders to build a website, if you use CSS to layout the web page, if the customer is dissatisfied later, especially the color tone, it will be quite easy to change it, and you can even customize several styles of CSS files. For customers to choose, or write a program to implement dynamic calls, so that the website has the function of dynamically changing the style.
Achieving the separation of structure and presentation
Before actually starting layout practice, let’s understand one more thing - the separation of structure and presentation. This also uses the characteristics of CSS layout. After the separation of structure and presentation, the code can Simple and easy to update, isn’t this the purpose of learning CSS? For example, P is a structured tag. Where there is a P tag, it means that it is a paragraph block. Margin is a performance attribute. I want to make a paragraph right-indented by 2 characters. Some people will think of adding spaces and then continue You can add spaces without adding spaces, but now you can specify a CSS style for the P tag: P {text-indent: 2em;}, so that the resulting body content is as follows, without adding any additional performance control tags:
If you still want to This paragraph needs to be modified with font, font size, background, line spacing, etc. Just add the corresponding CSS directly to the P style. There is no need to write it like this:

Paragraph content

This is written with a mixture of structure and expression. If many paragraphs have a unified structure and expression. , it will be cumbersome to write down the code in this way.
Let’s directly list a piece of code to deepen our understanding of the separation of structure and performance:
Use CSS for typesetting

It is recommended to thoroughly understand CSS box mode (quick start with DIV layout)_Experience exchange

不用CSS排版

It is recommended to thoroughly understand CSS box mode (quick start with DIV layout)_Experience exchange

　　第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。

用CSS排版减小网页文件体积

像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：

前言

正文内容

CSS盒子模式

正文内容

转变思想

正文内容

熟悉步骤

正文内容

Familiar with the work process
Before we actually start working, we must form this idea in our minds: I don’t know what the table is, and I can’t let the performance control label appear in the content part, such as : font, color, height, width, align and other tags can no longer appear. (To put it simply, brainwash before working, forget the previous practices, and accept and use new methods). I don’t just use p to implement typesetting. Nesting, p is a block-level element, and P is also a block-level element. For example, if you want to separate several blocks of text content, you don’t have to use p to call it p layout. It’s not “

text block one

text block two

text block three

", while using "

text block two

text block three

” is more appropriate.
The design idea of using p CSS is as follows: 1. Use p to define the semantic structure; 2. Then use CSS to beautify the web page, such as adding background, line borders, alignment attributes, etc.; 3. Finally, define in this CSS Add content to the box, such as text, pictures, etc. (there are no labels showing attributes). Let's do an example with me to deepen our understanding of this step. First look at the result picture:

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

CSS layout result diagram

Use p to define the semantic structure
Now what I want to demonstrate to you is a typical layout column structure. That is, the page header, navigation bar, content, and copyright (as shown below),

Typical layout column structure

The structure code is as follows:

Copy code The code is as follows:

body>

For the outermost big box (the big box containing the small box), we need to center it on the page, redefine its width to 760 pixels, and add a border, then its style is:

Copy code The code is as follows:

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 here, and design a certain gap at its lower border. The purpose is to prevent the image of the page header from interfering with the navigation bar to be done below. Connected 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;
}

I made the navigation bar look like one A small button. Moving the mouse up will change the button background color and font color. Then we can understand these small buttons as small boxes. In this case, 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 { >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 contains the article content, including titles and paragraphs. The titles are bold. For standardization, I use H tags and paragraphs. To automatically indent the first line by 2 words, and at the same time, all content should appear to be at a certain distance from the border of the outer large box, use padding 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;

For the copyright column, add a background to it to match the header of the page. The text inside should be automatically centered and aligned, with multiple lines. Content, line spacing should be appropriate, and the link style here can also be specified separately, but I won’t do that here. The style code is as follows:

#footer {
height: 50px;
width: 740px;
line-height: 2em;
text-align: center;
background-color: #009966;
padding: 10px;
}

Finally, return to the beginning of the style You will see a style code like this:

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

This is to use wildcards to initialize the boundaries and padding of each tag (because some tags have certain boundaries by default, such as the Form tag). Then there is no need to add such control to each tag. This can be done in a certain way. Simplify the code to a certain extent. The final completed style code is as follows:

The structure code is like this: