Web standard tutorial: Tiantian CSS Layout

The biggest difference between CSS layout and traditional table layout is that the original positioning uses tables to control the spacing of text layout sections through table spacing or colorless and transparent GIF images; currently, the layer (div) is used to locate and control the section spacing through attributes such as margin, padding, and border of the layer.
1. Define DIV
Analyze a typical div definition example:

The code is as follows:	Copy code
# 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) # fefefefe no-repeat right bottom; COLOR: #666; TEXT-ALIGN: center; LINE-HEIGHT: 150%; WIDTH: 60% ;}

Description:
● The layer name is sample. You can call this style by using <div id = "sample"> on the page.
● MARGIN refers to the MARGIN left outside the border of the layer. It is used for MARGIN or to make a gap with other layers. "10px 10px 10px" represents "top right bottom left" (clockwise direction) four margins, if the same, can be abbreviated as "MARGIN: 10px ;". If the MARGIN is zero, it must be written as "MARGIN: 0px ;". Note: When the value is zero, except for the RGB color value 0%, it must be followed by the percent sign. In other cases, it may not be followed by the unit "px ". MARGIN is a transparent element and cannot define colors.
● PADDING refers to the blank between the border of the layer and the content of the layer. Same as margin, it specifies the distance from the top-right bottom left border to the content. If they are all the same, it can be abbreviated as "PADDING: 0px ". You can specify "PADDING-LEFT: 0px;" on the LEFT ;". PADDING is a transparent element and cannot define colors.
● BORDER refers to the BORDER of the layer, "BORDER-RIGHT: # CCC 2px solid;" defines the right border color of the layer as "# CCC", and the width is "2px ", the style is a "solid" straight line. To use the dotted line style, you can use "dotted ".
● BACKGROUND is the BACKGROUND of the definition layer. Define the image background in two levels. Use "url (../images/bg_logo.gif)" to specify the path of the background image, and then define the background color "# FEFEFE ". "No-repeat" indicates that the background image does not need to be repeated. If you need to repeat-x horizontally, repeat-y is used vertically ", repeat is used to repeatedly fill the entire background ". The following "right bottom;" indicates that the background image starts from the bottom right corner. If there is no BACKGROUND image, you can only define the BACKGROUND color BACKGROUND: # fefefefe