Using Web standards to build a station day 8th: Getting Started with CSS layouts

Source: Internet
Author: User
Tags define definition dashed line repetition
Css|web|web standard |css|web standard CSS layout and traditional table (table) layout The biggest difference is: The original positioning is the use of tables, through the spacing of the table or with a colorless transparent GIF picture to control the spacing of the layout of the text, but now use the layer (div) to locate, Control the spacing of the plates through the Margin,padding,border properties of the layer.
1. Define DIV Analysis A typical definition 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 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 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. As with margin, specify the distance from the bottom-right border to the content. If all the same, can be abbreviated as "padding:0px". Individual designation left can be written as "padding-left: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 ". "No-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:



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. )




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.