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) #fefefe no-repeat right kettle
Color: # 666;
TEXT-ALIGN: CENTER;
Line-height: 150%; Width: 60%;
The following: The name of the layer is SAMPLE, and this style can be called with
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. Below 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, 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 position between layers and layers. I will gradually explain it later.
2. CSS2 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 the definition. These objects Includes 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 XHTML CSS layout, there is a technology that makes you not used to it, it should be said to be 炙嘉 砀 砀 砀 谎 谎 ㄖ 帽 尘 词 词 帧 帧 @ 庋 庋 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; But this is not recommended. 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. This is 2 points: the performance is thoroughly separated from the structure (refer to another article: "Understanding performance and structural phase separation"), using CSS to control all the appearance, easy to revisions. 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.
http://www.wrclub.net/study/listaticicle.aspx?id=2640&page=1
转载请注明原文地址:https://www.9cbs.com/read-100269.html
