Getting started with CSS layout

Getting started with CSS layout

#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 (/articleimg/2004/06/1933/bg_poem.jpg) #fefefe no-repeat right bottom

Color: # 666;

TEXT-ALIGN: CENTER;

Line-height: 150%;

Width: 400;

}

The biggest difference between the CSS layout and the traditional table (Table) layout is that the original positioning is a table, through the spacing of the table, or the spacing of the layout block with colorless transparent GIF images; and now use the layer (DIV) To locate, through the layers of Margin, Padding, Border, etc. to control the spacing of the block. 1. Define a typical definition Div example: #sample {margin: 10px 10px 10px 10px; padding-ip: 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) #Fefefefefe 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, and this style can be called in the page in the page. Margin refers to the blank left by the border of layers, which is used for a pages or a spacing with other layers. "10px 10px 10px 10px" represents four margins represent "upper left" (clockwise), if all, can be abbreviated as "margin: 10px;". If the margins are zero, they must be written into "margin: 0px;". Note: When the value is zero, in addition to the RGB color value must be with a percent sign, other cases may not be "PX" in units. Margin is a transparent element that cannot be defined. Padding is a blank between the layer of the layer to the layer. "Padding-left" refers to the distance between the left border to the content, and so on. If all, you can abbreviate "padding: 0px". Padding is a transparent element that cannot be defined. Border refers to the border of the layer, "Border-Right: #ccc 2px solid;" is the right side of the definition layer to "#CCC", the width is "2px", the style is "solid" straight line. If you want a dotted pattern, you can use "dotted". Background is the background of the definition layer. Level 2 definition, first define the image background, use "URL (../ images / bg_logo.gif)" to specify background image path; secondly define the background color "#fefefe". "On-repeat" means that the background image does not need to be repeated. If you need to repeat "Repeat-X" in the transverse reuse, repeat "repeat-y", repeat the entire background with "repeat". The "right bottom;" refers to the background image starts from the lower right corner. If there is no background picture, you can define the background color background: #fefefe color is used to define the font color, and the previous section has been introduced. Text-align is used to define the content arrangement in the layer, CENTER, Left is left, Right is right. Line-height defines a high line, 150% refers to 150% of the height of standard height, or Writing: line-height: 1.5 or line-height: 1.5em, is the same meaning. Width is the width of the definition layer, which can be used, such as 500px, or percentage, "60%" here. It should be noted that this width refers to the width of your content, does not include Margin, Border, and Padding. But in some browsers are not as defined, try more. Here is the actual performance of this layer: Here is a demo content. Here is a demo content. Here is a demo content. Here is a demo content. Here is a demo content, here is a demo content, here is a demo content,

Here is the demo, here is a demo content,

Here is the demo, here is a demo content,

Here is the demo ...

We can see the border is 2px gray, the background picture is not repeated in the lower right, and the content is on the left and the left box 20px, the content is among, everything is the same. Hoho, although it is not good, it is the most basic, mastering it, you have learned half of the CSS layout technology. That's it, it's not difficult! (What is the other half? The other half is the positioning between layers and layers. I will gradually explain it later.) 2. CSS2 box model has been put on the launch of CSS1 in 1996, and the W3C organization recommends putting the objects on all pages. In a box (Box), designers can control the properties of this box by creating definitions, including paragraphs, lists, titles, pictures, and layers

. The box model mainly defines four regions: content, side frame distance (padding), border, and margin. The Sample layer we told above is a typical box. For beginners, they often don't know the hierarchical, relationships and interactions between margin, background-color, background-image, padding, content, border. Here is a 3D schematic of a box model, you want to make your understanding and memory. 3. Auxiliary pictures use the background processing with the XHTML CSS layout, there is a technology that makes you not used to it, it should be said to be a way of thinking and traditional form layout, that is: All auxiliary pictures are implemented in background. Similar to this: Background: URL (images / bg_poem.jpg) #Fefefefe no-repeat right bottom; Although you can use to plug in content directly, this is not allowed. The "secondary picture" here refers to a portion that is not used as a page to be expressed, but only for modifications, intervals, and reminders. For example: pictures in albums, pictures in image news, the above 3D box model pictures are part of the content, they can use the element directly in the page, and other similar logo, title picture, list prefix picture It must be displayed in background methods or other CSS modes. There is 2 points for this: the performance is completely separated from the structure, and all the appearance is controlled by CSS to facilitate the revision. Make the page more easily and more affinity. For example: blind people use the screen reader, the picture implemented with the background technology will not be read.

Editor: Web Designer Author: Acha