Day 8th: Getting Started with CSS Layout Basics Tutorial

The biggest difference between CSS layout and traditional table layout is that the original positioning is to use the table, the spacing of the table or a colorless and transparent GIF picture to control the spacing of the Text Layout section, and now use the layer (div) to locate, through the layer of margin,padding, Border and other properties to control the spacing of the section.

1. Define Div

Analyze a typical definition of a 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 called in the page.
• Margin is a blank that is left outside the bounding rectangle of the layer, used for margins, or to create a gap 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: When the value is zero, except for the RGB color values 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 define a color.
• Padding refers to the gap between the layers ' borders and the contents of the layers. As with margin, specify the distance from the bottom-right-left border to the content, respectively. If they are all the same, they can be abbreviated as "padding:0px". Individually designated left can be written as "padding-left:0px;". Padding is a transparent element and cannot define a color.
• BORDER is the border of the layer, "Border-right: #CCC 2px solid;" is the color of the right border of the definition layer is "#CCC", the width is "2px" and the style is "solid" straight line. If you want a dashed line style you can use "dotted".
• Background is the background of the definition layer. 2-level definition, the first definition of the picture background, the use of "url (.. /images/bg_logo.gif) "To specify the background image path, and then the background color" #FEFEFE ". "no-repeat" refers to the background image does not need to repeat, if the need for horizontal re-use "repeat-x", the longitudinal re-use "repeat-y", repeat the entire background with "repeat." The back of "right bottom;" Refers to the background image from the bottom right corner of the beginning. If you don't 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 the layer, center center, left and right.
• Line-height defines the row height, 150% refers to the height of the standard height of 150%, can also write:line-height:1.5 or line-height:1.5em, are the same meaning.
• Width is the definition of the thickness of the layer, you can use a fixed value, such as 500px, can also be used as a percentage, like here "60%". Note that this width only refers to the width of your content and does not contain margin,border and padding. But in some browsers that are not so defined, you need to try more.

Here is the actual performance of this layer:

Here is the demo, here is the demo, here is the demo, here is the demo, here is the demo, here is the demo, here is 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,

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 distance and the left border is 20px, the content is centered, everything is the same as expected. HoHo, although 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 positioning between layers. I'll explain it in the back. )

2.CSS2 Box Model

Since the launch of the CSS1 in 1996, the organization has recommended that all the images on the Web page be placed in a box, where designers can control the properties of the box by creating definitions, including paragraphs, lists, headings, pictures, and layers. The box model mainly defines four regions: content, Border spacing (padding), Border (border), and margin (margin). The sample layer we talked about above is a typical box. For beginners, it is often unclear the level, relationship and interaction between margin,background-color,background-image,padding,content,border. Here is a box model of 3D, hoping to facilitate your understanding and memory.

3. Auxiliary images are treated with background

With the xhtml+css layout, there is a technique that you are not accustomed to at first, should say is a way of thinking and traditional table layout is not the same, that is: all the auxiliary images are implemented with the background. Similar to this:

Background:url (images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

Although it can be inserted directly into the content, this is not recommended. The "secondary pictures" here refer to images that are not part of the content to be expressed as pages, but only for retouching, spacing, reminders. For example: Pictures in the album, pictures in the news of the picture, the above 3d box model pictures are part of the content, they can be inserted directly into the page with elements, and other similar logo, title image, list prefix images must be used in the background or other CSS display.

There are 2 reasons for this:

• Separate the performance from the structure (read another article: "Understanding performance and Structure separation"), using CSS to control all the appearance of the performance, easy to revision.
• Make the page more user-friendly and more approachable. For example, a blind person uses a screen reader, and a picture that is implemented with background technology will not be read aloud.

