Getting Started with CSS layouts

The most important difference between CSS layout and traditional table layout is: The original positioning is to use a table, through the spacing of the table or with a colorless and transparent GIF picture to control the space between the layout of the text, and now use the layer (div) to locate, through the layer of margin,padding, Border and other properties to control the space between the plates.

1. Define Div

Analyze a typical definition div example:

#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #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: