Thoroughly understand CSS box mode (DIV layout)_html/css_WEB-ITnose

Foreword

If you want to try not to use tables to layout web pages, but to use CSS to layout your web pages, that is, you often hear the use of DIV to layout your web page structure, or you want to Learn web 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 DIV layout, traditional Table layout uses tables and table nestings of different sizes to position and layout web page content. After switching to CSS layout, 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 CSS Box Mode

What is CSS Box Mode? 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 anti-seismic 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 (DIV nested). Unlike boxes in real life, things in real life generally cannot be larger than boxes, 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 a 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 ours. The web page layout to be done is designed, as shown below.

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, colors, etc. Then we can freely draw it using software such as Photoshop, and finally cut it into small pictures. We can no longer freely generate pages by designing HTML. After switching to CSS for layout, we have to change this idea. At this time, our main consideration is the content of the page. Semantics and structure, because of a web page with strong CSS control, after the web page is completed, you can easily adjust the web page style you want. Moreover, another purpose of CSS layout is to make the code easy to read, clear the blocks, and strengthen the code. Reuse, so structure is 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 you can’t achieve the effect with CSS, you don’t even need to think about using tables to achieve it, because the control ability of CSS is so 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.

Realize the separation of structure and presentation

Before starting the actual layout practice, let’s understand one more thing? The separation of structure and presentation. This also uses the characteristics of CSS layout, the separation of structure and presentation. Finally, the code will be concise 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 indicates that this 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 Spaces are added, but now you can specify a CSS style for the P tag: P {text-indent: 2em;} or P{margin: 0em 0em 0em 2em;}, so that the resulting body content is as follows, without any additional presentation control. Tags:

I have been joining the Tianya community for a while, but I have never had time to write anything. Today I wrote an article about CSS layout, and tried to explain the knowledge points in a popular language, with examples and pictures. , I believe it will be helpful to those who are new to CSS layout.

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. There is no need to write it like this:

＜p＞＜font color="#FF0000" face="宋体"＞段落内容＜/font＞＜/p＞

This is written by mixing structure and expression. If many paragraphs have a unified structure and expression, it will be cumbersome to write the code in this way.
Let’s directly list a piece of code to deepen our understanding of the separation between structure and performance:

Use CSS for formatting

＜style type="text/css"＞  
 ＜!--  
 #photoList img{  
 height:80;  
 width:100;  
 margin:5px auto;  
 }  
 --＞  
 ＜/style＞  
  
 ＜p id="photoList"＞  
 ＜img src="01.jpg" /＞  
 ＜img src="02.jpg" /＞  
 ＜img src="03.jpg" /＞  
 ＜img src="04.jpg" /＞  
 ＜img src="05.jpg" /＞  
 ＜/p＞

No CSS for formatting

＜img src="01.jpg" width="100" height="80" align="center" /＞  
 ＜img src="02.jpg" width="100" height="80" align="center" /＞  
 ＜img src="03.jpg" width="100" height="80" align="center" /＞  
 ＜img src="04.jpg" width="100" height="80" align="center" /＞  
 ＜img src="05。jpg" width="100" height="80" align="center" /＞

The first method is to separate the structure and presentation. The content part code is simple. If there are more image lists, then the first CSS layout method is more Advantages, let me give you an analogy to help you understand: I introduce a person to you in BODY, and I only tell you that he is a person. As for what kind of person he is, how tall he is, whether he is a man or a woman, you go to CSS Just check there and you'll find out. In this way, my work in BODY will be simple, which means that the code of BODY will be simple. If BODY has a team member there, I can just record an item in CSS. This is a bit like the concept of components and instances in Flash software. Different instances share the same component, so the animation file will not be large. The idea is to move the idea to CSS web design, that is, the code is not complicated, and the web page file is small and can be downloaded by the client faster.

Demo address: http://www.hsptc.com/css1.html

Use CSS layout to reduce web page file size

Like the layout I made above, it is divided into four blocks. The framework of each block is the same. This framework is written using CSS. Once the style is written, it can be called countless times (using class Call instead of ID), as long as you change the text content, you can generate many sections with a unified style. Its style and structure code is (please do not directly copy and generate the web page, paste the following codes into the web page where they should be Position):

＜style type="text/css"＞   
 ＜!--   
 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 span {   
 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"＞   
 ＜span＞前言＜/span＞   
 ＜p＞正文内容＜/p＞   
 ＜/p＞   
   
 ＜p class="mainBox"＞   
 ＜span＞CSS盒子模式＜/span＞   
 ＜p＞正文内容 ＜/p＞   
 ＜/p＞   
   
 ＜p class="mainBox"＞   
 ＜span＞转变思想＜/span＞   
 ＜p＞正文内容 ＜/p＞   
 ＜/p＞   
   
 ＜p class="mainBox"＞   
 ＜span＞熟悉步骤＜/span＞   
 ＜p＞正文内容 ＜/p＞   
 ＜/p＞

Be familiar with the work process

Before we actually start working, we must form such an idea in our minds: I don’t know what the table is, and in the content part I Don't let it reappear. Performance control tags, such as: font, color, height, width, align and other tags, can't reappear. (Simply put, brainwash before working, forget the old practices, and accept and use new methods), I don't simply use DIV to implement nesting of typesetting. DIV 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 DIV to call it DIV typesetting. It is not "< p＞Text block one＜/p＞＜p＞Text block two＜/p＞＜p＞Text block three＜/p＞”, and use "＜p＞Text block one＜/p＞＜p＞Text block two ＜/p＞＜p＞Text block three＜/p＞” is more appropriate.

The idea of ​​using DIV CSS to design 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, in this CSS Add content to the defined box, such as text, pictures, etc. (there are no labels that express attributes). Let's do an example with me to deepen our understanding of this step. Let’s take a look at the result picture first:

Demo address: http://www.hsptc.com/css2.html
CSS layout result picture
1. Use p to define the semantic structure
Now I want to demonstrate to you a typical layout column structure, that is, page header, navigation bar, content, copyright (as shown below),


Typical layout column structure

The structure code is as follows:

＜p id="header"＞＜/p＞  
 ＜p id="nav"＞＜/p＞  
 ＜p id="content"＞＜/p＞  
 ＜p id="footer"＞＜/p＞

Above we defined four boxes, according to what we want The result is that we want these boxes to be of equal width, arranged neatly from bottom to bottom, and then centered in the entire page. In order to facilitate control, we put these four boxes into a larger box, so that the code becomes Into:

＜p id=”mainBox”＞  
 ＜p id="header"＞＜/p＞  
 ＜p id="nav"＞＜/p＞  
 ＜p id="content"＞＜/p＞  
 ＜p id="footer"＞＜/p＞  
 ＜/p＞

For the outermost big box (the big box containing the small boxes) we want to center it on the page and add a border, then its style is:

#mainBox {  
 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 in the lower border, in order to make the page The header image should not be connected with the navigation bar to be made below, this is also for the sake of beauty. The 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 like small buttons. Moving the mouse up will change the background color and font color of the buttons, so these small We can understand buttons as small boxes, so 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;  
 }

内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：

#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;  
 }  
 最后回到样式开头大家会看到这样的样式代码：  
 * {  
 margin: 0px;  
 padding: 0px;  
 }

这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：

＜style type="text/css"＞  
 ＜!--  
 * {  
 margin: 0px;  
 padding: 0px;  
 }  
 body {  
 font-family: Arial, Helvetica, sans-serif;  
 font-size: 12px;  
 }  
 #mainBox {  
 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＞

结构代码是这样的：

＜p id="mainBox"＞  
 ＜p id="header"＞＜/p＞  
 ＜ul id="nav"＞  
 ＜li＞＜a href="#"＞首 页＜/a＞＜/li＞  
 ＜li＞＜a href="#"＞文 章＜/a＞＜/li＞  
 ＜li＞＜a href="#"＞相册＜/a＞＜/li＞  
 ＜li＞＜a href="#"＞Blog＜/a＞＜/li＞  
 ＜li＞＜a href="#"＞论 坛＜/a＞＜/li＞  
 ＜li＞＜a href="#"＞帮助＜/a＞＜/li＞  
 ＜/ul＞  
 ＜p id="content"＞  
 ＜h3＞前言＜/h3＞  
 ＜p＞第一段内容＜/p＞  
 ＜h3＞理解CSS盒子模式＜/h3＞  
 ＜p＞第二段内容＜/p＞  
 ＜/p＞  
 ＜p id="footer"＞  
 ＜p＞关于华升 　 广告服务 　 华升招聘 　 客服中心 　 Q Q留言 　 网站管理 　 会员登录 　 购物车＜/p＞
 ＜p＞Copyright © 2006 - 2008 Tang Guohui. All Rights Reserved＜/p＞  
 ＜/p＞  
 ＜/p＞

以上就是彻底弄懂CSS盒子模式（DIV布局）_html/css_WEB-ITnose的内容，更多相关内容请关注PHP中文网（www.php.cn）！