Css|web|web standard |css|web standard CSS layout and traditional table (table) layout The biggest difference is: The original positioning is the use of tables, through the spacing of the table or with a colorless transparent GIF picture to control the spacing of the layout of the text, but now use the layer (div) to locate, Control the spacing of the plates through the Margin,padding,border properties of the layer.
1. Define DIV Analysis A typical definition div example: #sample {margin:10px 10px 10px 10px;
padding:20px 10px 10px 20px;
Border-right: #CCC 2px solid;
Border-bottom: #CCC 2px solid;
Border-left: #CCC 2px solid;
Border-top: #CCC 2px solid;
Background:url (images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
Text-align:center;
line-height:150%; width:60%; }
The description is as follows:
The name of the layer is sample, which can be invoked on the page using <div id= "Sample" >.
Margin is a blank space that is left outside the border of a layer, for margins or for creating a space with other layers. "10px 10px 10px 10px" represents "upper right lower left" (clockwise direction) four margins, if all the same, can be abbreviated as "margin:10px;" If the margin is zero, write "margin:0px;" Note: Duty is zero, in addition to RGB color value 0% must be followed by a percent semicolon, other cases can not be followed by the unit "PX." Margin is a transparent element and cannot be defined as a color.
Padding is the space between the layer's border and the content of the layer. As with margin, specify the distance from the bottom-right border to the content. If all the same, can be abbreviated as "padding:0px". Individual designation left can be written as "padding-left:0px;" Padding is a transparent element and cannot be defined as a color.
BORDER refers to the frame of the layer, "Border-right: #CCC 2px solid;" Is the right border of the definition layer color is "#CCC", the width is "2px", the style is "solid" line. If you want a dashed line style, you can use "dotted".
Background is the background of the definition layer. 2-level definition, first define the picture background, using the "url (... /images/bg_logo.gif) "To specify the background picture path, and then to define the background color" #FEFEFE ". "No-repeat" refers to the background image does not need to repeat, if the need for horizontal repetition with "repeat-x", longitudinal repetition with "repeat-y", repeated cover the entire background with "repeat". Behind the "right bottom;" The background picture starts from the lower-right corner. If you do not have a background picture, you can define only the background color background: #FEFEFE
Color is used to define the font color, as described in the previous section.
Text-align is used to define the arrangement of content in a layer, center center, left and right.
Line-height definition Row height, 150% refers to height of the standard height of 150%, can also write: line-height:1.5 or line-height:1.5em, are the same meaning.
The width is defined as the breadth of the layer, can be fixed values, such as 500px, can also be used as a percentage, like here, "60%." Note that this width simply refers to the width of your content and does not contain margin,border and padding. But in some browsers this is not the definition, you need to try more.
Here is the actual performance of this layer:
We can see that the border is 2px Gray, the background image is not duplicated on the right, the content is about 20px from the left border, the content is centered, everything is the same as expected. HoHo, although it is not good to see, but it is the most basic, mastered it, you have learned half of the CSS layout technology. That's it, it's not hard! (What is the other half?) The other half is the position between the layer and the layer. I'll explain it step-by-step in the back. )
