CSS study notes two

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 of DIV analysis Div example:

#Sample {margin: 10px 10px 10px 10px; Padding: 20px 10px 10px 20px; 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) #Fefefefe no-repeat right bottom; color: # 666; text-align: center; line-height: 150%; Width: 60%;

described 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. Like margin, specify the distance between the upper right left box to the content. If all, you can abbreviate "padding: 0px". The left side can be written separately as "padding-left: 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". "No-repeat" means that the background image does not need to be repeated, and if you need to repeat "Repeat-X" horizontally, 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:

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. CSS 2 Box Model Since the launch of CSS1 in 1996, the W3C organization recommended that the objects on all the web pages are placed in a box (Box), and the designer can control the properties of this box by creating definitions, including these objects including Paragraphs, lists, titles, pictures, and layers