1.Define DIV
Analyze a typical definition 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 instructions are as follows:
The name of the layer is sample. You can call this style by using <div id="sample"> on the page.
MARGIN refers to the blank space left outside the border of the layer, used for page margins or to create a gap with other layers. "10px 10px 10px 10px" respectively represents the four margins of "top, right, bottom and left" (clockwise direction). If they are all the same, they can be abbreviated to "MARGIN: 10px;". If the margin is zero, write "MARGIN: 0px;". Note: When the value is zero, except for the RGB color value 0% which must be followed by a percent sign, in other cases the unit "px" does not need to be followed. MARGIN is a transparent element and cannot define a color.
PADDING refers to the space between the layer's border and the layer's content. Like margin, specify the distance from the top, right, bottom and left borders to the content respectively. If they are all the same, you can shorten it to "PADDING:0px". To specify the left side individually, you can write "PADDING-LEFT: 0px;". PADDING is a transparent element and cannot define color.
BORDER refers to the border of the layer. "BORDER-RIGHT: #CCC 2px solid;" defines the right border color of the layer as "#CCC", the width as "2px", and the style as "solid" straight line.
If you want a dotted line style, you can use "dotted".
BACKGROUND defines the background of the layer. It is defined in two levels. First define the image background and use "url(../images/bg_logo.gif)" to specify the background image path; secondly define the background color "#FEFEFE". "no-repeat" means that the background image does not need to be repeated. If you need to repeat it horizontally, use "repeat-x", to repeat it vertically, use "repeat-y", and to repeat it to cover the entire background, use "repeat". The following "right bottom;" means that the background image starts from the lower right corner. If there is no background image, you can only define the background color BACKGROUND: #FEFEFE
COLOR is used to define font color, which has been introduced in the previous section.
TEXT-ALIGN is used to define the arrangement of content in the layer, center is in the middle, left is in the left, and right is in the right.
LINE-HEIGHT defines the line height. 150% means that the height is 150% of the standard height. It can also be written as: LINE-HEIGHT:1.5 or LINE-HEIGHT:1.5em, which have the same meaning.
WIDTH is the width of the defined layer, which can be a fixed value, such as 500px, or a percentage, like "60%" here. It should be noted that this width only refers to the width of your content, and does not include margin, border and padding. But it is not defined this way in some browsers, so you need to try more.
2.CSS2 box model
Since the launch of CSS1 in 1996, the W3C organization has recommended that all objects on the web page be placed in a box. Designers can control the properties of this box by creating definitions. These objects include paragraphs, lists, and titles. , images and layer <div>. The box model mainly defines four areas: content, padding, border and margin. The sample layer we talked about above is a typical box. For beginners, they are often confused about the levels, relationships, and mutual influences among margin, background-color, background-image, padding, content, and border. Here is a 3D schematic diagram of the box model, I hope it will be easier for you to understand and remember.
When using XHTML+CSS layout, there is a technology that you may not be used to at first. It should be said that it is a way of thinking that is different from the traditional table layout, that is: all auxiliary images are implemented with backgrounds. Something like this:
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
Although it is possible to insert <img> directly into the content, this is not recommended. The "auxiliary pictures" here refer to pictures that are not part of the content to be expressed on the page, but are only used for decoration, interval, and reminder. For example: pictures in photo albums, pictures in picture news, and the 3D box model pictures above are all part of the content. They can be directly inserted into the page using the <img> element, while others are similar to logos, title pictures, and list prefix pictures. All must be displayed using background mode or other CSS methods.
There are 2 reasons for this:
Completely separate performance from structure (refer to reading another article: "Understanding the Separation of Performance from Structure"), and use CSS to control all appearance and performance for easy revision.
Make the page more usable and friendly. For example, if a blind person uses a screen reader, pictures implemented using background technology will not be read aloud.