Understand CSS box model 

  what is the css box model?    Why is the box call?    We first talk about the design of the website Changyi attributes: content (content), filling (padding), frame (border), the borders (margin), the CSS box model with all these attributes. 

  CSS box model these attributes we can transfer it to our daily lives in the box (box) understanding of everyday life in the box also has seen these attributes, so call box model.    It is content with things in the box and the box filled with fear is something (expensive) damage to add the foam or other seismic accessories; frame is the box itself; As for the border, however, the box can Display the time heap all together, to leave a certain gap maintain ventilation, but also for the convenience of just removed.    In web design, content often refer to text, images and other elements, but it can also be a small box (DIV nested), and the reality of life in the box difference is that in real life things are generally not more than box, or box will be shoring bad, and the CSS box flexible, the material inside the box itself off shoring it up, but it will not be damaged.    Filled only Width attributes, can be understood as life in the earthquake in the box accessories thickness, and the frame is the size and color, we also can be understood as seen in the life of the box and the thickness of the box is made with the colour of the material, The Border is the box with other things to retain much distance.    In real life, we assume that in a square in the different sizes and colors of the box in a certain order and the gap between the display, and the final over from the square down, the graphics and see what we have to do similar structure on the page layout, as the following picture. 
  From the "box" of the page layout stack up 

  Now CSS box model to understand how many, if it is not thorough, went to find out, I will be back, for example, and continue to use the box to explain the concept of it. 

  Change our thinking 

  Web Design traditional outlook of this is: Upon request, first consider the good main colours, what should type of picture, what fonts, colors, etc., and then reuse <Photoshop software such freedom drawn, and finally cut into small map, not by design to generate html pages using CSS layout, we must change this idea, at this time our main consideration is the semantic content pages and structure, as a strong CSS control of the website, etc. good website, you can also easily transfer the web page you want to style Moreover css layout Another purpose is to allow the code to read, Clear blocks, and strengthen the code reuse, so the structure is very important.    If you wish to say that my web design very complicated, and later as to achieve the effect?    I want to tell you is, if we use CSS not realize the effect of general form is also used to be very difficult to achieve, because of the ability to control CSS is too strong, and that is the way with the CSS layout there is a very practical benefit is the If you do is to single-site, if you use the CSS page layout, and then do what dissatisfied customers, especially the colours, then it is relatively easy to change up, and even some you can customize the css style documents for customer choice, or to write a program to achieve dynamic invocation to make Web sites with dynamic changes in style functions.    <P> 

  And the realization of structural separation performance 

  In the real beginning of the layout before practice, and then understand one thing - the structure and performance of the separation, which also used CSS layout of the characteristics of the structure and performance of separation, only the code is simple and easy to update, which is exactly what we do not learn the CSS the objective?    For example, P is the structure of the label, the label where P said this is a paragraph blocks, the Margin performance attributes, I have to let a paragraph indent 2 right word, some people will think of spaces, and then constantly spaces, but can now designate a label to P CSS style: P (text-indent: 2em;), the results of this body part on the following contents, plus any performance is no control of the label: 

  <p> Into distant communities for a long time, but did not have time Xiediandongxi, today wrote an article relating to the layout of CSS, and strives to achieve through a common language to illustrate the knowledge, also supported examples and pictures , I believe beginner CSS layout of the people will bring about some help. 

  If this paragraph would also like to add font, size, background, such as modified spaced directly to the corresponding CSS style, into P on the trip, not to write like this: 

  <p> <font Color="#FF0000" face="宋体"> paragraphs content </ font> </ p> 

  This is the structure and performance of mixed together to write, and if many paragraphs of a unified structure and performance, the cumulative write it this way on the multiplication of the code. 

  A section of the code directly out deepen their understanding of the structure and performance of phase separation: 
  Layout with CSS 

  The following is quoted fragment: 
  <style Type="text/css"> 
  <! -- 
  # PhotoList img ( 
  Height: 80; 
  Width: 100; 
  Margin: 5px auto; 
  ) 
-->
  </ Style> <div id="photoList"> 
  <img Src="01.jpg" /> 
  <img Src="02.jpg" /> 
  <img Src="03.jpg" /> 
  <img Src="04.jpg" /> 
  <img Src="05.jpg" /> 
  </ Div> 

  Not CSS layout 

  The following is quoted fragment: 
  <img Src="01.jpg" width="100" height="80" align="middle" /> 
  <img Src="02.jpg" width="100" height="80" align="middle" /> 
  <img Src="03.jpg" width="100" height="80" align="middle" /> 
  <img Src="04.jpg" width="100" height="80" align="middle" /> 
  <img Src="05。 jpg" width="100" height="80" align="middle" /> 

  The first method is the separation performance of the structure, contents of the simple bar code, if there are more pictures of the list, then the first CSS layout method more advantages, I may use an analogy Hello understand: I to BODY tell a person, I just said to you he is a person, as he is what kind of people, how high is male or female, you check under the CSS to know.    BODY so I work on the simple, that is to say BODY code on the simple.    BODY If there is a team in there, I record in the CSS on a trip, This is a bit like Flash software, components and examples of the concept of different examples of sharing the same components, such animation is not a document, such moved to the CSS web design idea, the code is not complex, small size page document can be faster to download the client.    Demo Address: http://www.hsptc.com/css1.html with CSS page layout document volume decreases 

  I do like the above that space, divided into a total of four blocks, each block is the same as that in the framework of the framework is to use CSS written, a form of writing, can be deployed numerous times (in class call rather than ID), as long as the text of the change which can be generated on the unified style of the many plates, and its style and structure of the code is (please do not directly generate page copy of the following codes to paste pages they should be in the Position ): 

  The following is quoted 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"> 
  <h5> Foreword </ h5> 
  <p> Text content </ p> 
  </ Div> 
  <div Class="mainBox"> 
  <h5> CSS box model </ h5> 
  <p> Text content </ p> 
  </ Div> 
  <div Class="mainBox"> 
  <h5> Change our thinking </ h5> 
  <p> Text content </ p> 
  </ Div> 
  <div Class="mainBox"> 
  <h5> Familiar with the steps </ h5> 
  <p> Text content </ p> 
  </ Div> 

  Familiar with the work flow in before we really start to form in the minds of such a thought: What is the form I do not know, and the contents of it again, I can not control performance labels, such as: font, color, height, width, etc. align labels do not happen again, (simple work before brainwashing, forget the usual practice of the previous one, to accept and use the new methods), I am not simple to achieve by publishing DIV Nested, DIV is block-level elements, P is also, as in block-level elements, such as text to tell a few blocks, not necessarily use DIV才叫DIV typesetting, is not "<div> text block a </ div> <div> text block 2 </ div> <div> text block 3 </ div> "and" <p> text block a </ p> <p> text block 2 </ p> <p> text block 3 </ p> "more appropriate. 

  + CSS DIV with design of this is: 1. Used to define semantic structure div 2. Then use CSS to beautify the website, such as accession to the background, lines borders, alignment, and other attributes, 3. Final definition in the CSS box add content, such as text, pictures, etc. (no performance attributes of labels), Below we do with me an example of deepening the understanding of this step.    Figure look at the results: 

  Demo Address: http://www.hsptc.com/css2.htmlCSS publishing results Figure 

1.   Div used to define semantic structure 

  Now I want to give you the presentation is a typical layout of the column, that is the first page, navigation bar, content, and copyright (see below), the typical layout of the column structure of the code are as follows: 

  The following is quoted fragment: 
  <div Id="header"> </ div> 
  <div Id="nav"> </ div> 
  <div Id="content"> </ div> 
  <div Id="footer"> </ div> 

  We defined four top box, in accordance with the result we want, we have to let these box width, and from the next were neatly arranged, and then in the entire page in the middle alignment, in order to facilitate control, we then this four boxes stuffed into a larger box, the box is BODY, this code becomes: 

  The following is quoted fragment: 
<body>
  <div Id="header"> </ div> 
  <div Id="nav"> </ div> 
  <div Id="content"> </ div> 
  <div Id="footer"> </ div> 
  </ Body> 

  Most outside the box (small box containing the large box) we have to let it in the middle pages, both for the definition of the width of 760 pixels, the frame, then it is the style of: 

  The following is quoted fragment: 
  Body ( 
  Font-family: Arial, Helvetica, sans-serif; 
  Font-size: 12px; 
  Margin: 0px auto; 
  Height: auto; 
  Width: 760px; 
  Border: 1px solid # 006633; 
  ) 

  The first page for the sake of simplicity, we have it here as long as the entire block of a Background on the trip, and in their borders under a certain set design space so as to allow the top and below the image will not be linked to the navigation bar This is to handsome.    Its style code: 

  The following is quoted fragment: 
  (# Header 
  Height: 100px; 
  Width: 760px; 
  Background-image: url (headPic.gif); 
  Background-repeat: no-repeat; 
  Margin: 0px 0px 3px 0px; 
  ) 

  Navigation bar, I do imaging of a small button Mouse boost button will change the background Color and Font color, then these little buttons we can be understood as small box, so it is a nesting box problems, patterns, code as follows: 

  The following is quoted 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; 
  ) 

  Add some of the major contents of the article contents, headings and paragraphs, bold headline, in order to standardize, I use H label, the first paragraph should automatically indent to two characters and all the elements seem to big box and the outer frame to a certain extent distance from here to fill.    Content code for the block pattern: 

  The following is quoted 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 column, plus a background to it, with the top Xiangyang, the text automatically inside the center alignment, how to content, suitable distance trip, where links can also form a separate designation, I have here is not done.    Its style code as follows: 

  The following is quoted fragment: 
  # Footer ( 
  Height: 50px; 
  Width: 740px; 
  Line-height: 2em; 
  Text-align: center; 
  Background-color: # 009966; 
  Padding: 10px; 
  ) 

  Finally back to the beginning of the pattern we see this pattern code: 

  The following is quoted fragment: 
  * ( 
  Margin: 0px; 
  Padding: 0px; 
  ) 

  This is a wildcard with the initialization of the border and fill label, (default because some labels will have a border, such as the Form labels) then followed on with no need to label each with such controls, which can be some streamlining of code.    All completed forms final code is this: 

  The following is quoted 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> 

  Structure of the code is as follows: 

  The following is quoted fragment: 
<body>
  <div Id="header"> </ div> 
  <ul Id="nav"> 
  <li> <a Href="#"> Home </ a> </ li> 
  <li> <a Href="#"> article </ 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"> 
  <h5> Foreword </ h5> 
  <p> First content </ p> 
  <h5> Understand CSS box model </ h5> 
  <p> Content of the second paragraph of </ p> 
  </ Div> 
  <div Id="footer"> 
  <p> About l | advertising | l-recruitment | CS | Q Q Message | | Member Login | Cart </ p> <p> Copyright © 2006 - 2008 Tang Guohui. All Rights Reserved < / p> 
  </ Div> 
  </ Body> 

  Well, the end of this article, more content, such as: CSS in the width box, the browser compatibility issues, such as XHTML standardized wording Please reference to other information.    If the article can also feel that, after the recall Gentie read, I encourage you to continue the momentum of a new article ^ - ^