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-left:20px;
padding-top:20px;
padding-right:10px;
padding-bottom:10px;
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%; 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. "Padding-left" refers to the distance from the left border to the content, and so on. If all the same, can be abbreviated as "padding: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 ". "On-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:
Here's the demo, here's the demo, here's the demo, here's the demo, here's the demo, here's the demo, here's the demo, here's the demo,
Here is the demo content, here is the demo content,
Here is the demo content, here is the demo content,
Here is the demo content ...
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. )
2.css2 Box Model
Since the launch of the CSS1 in 1996, the consortium has recommended that all images on the web be placed in a box, and that designers can control the properties of the box by creating a definition that includes paragraphs, lists, titles, pictures, and layers <div>. The box model mainly defines four areas: content, Border distance (padding), Boundary (border), and margin (margin). Above we speak of sample layer is a typical box. For beginners, the level, relationship and interaction between margin,background-color,background-image,padding,content,border are often unclear. This provides a 3D schematic diagram of a box model, hoping to facilitate your understanding and memory.
3. The auxiliary picture all uses the background processing
With Xhtml+css layout, there is a technology at first let you not accustomed to, it should be said that a way of thinking and the traditional table layout is not the same, that is: all auxiliary pictures are implemented with the background. Something like this:
Background:url (images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
Although it can be inserted directly into the content with , this is not allowed. The "auxiliary picture" here refers to pictures that are not part of the content to be expressed as a page, but are only used for retouching, spacing, and reminders. For example: Photo album pictures, pictures in the news picture, the above 3d box model pictures are part of the content, they can use the elements directly inserted in the page, and other similar logo, title pictures, List prefix pictures must be used in the background or other CSS way to display.
There are 2 reasons to do this:
The performance and structure of the complete separation, with CSS control of all the appearance of performance, easy to revision.
Make the page more easy-to-use, more affinity. For example: A blind person using a screen reader, a picture that is implemented with background technology, will not be read aloud.
