Day 1: getting started with CSS layout

Document directory

• 1. Define DIV
• 2. CSS2 Box Model
• 3. background processing is used for all secondary images.

The biggest difference between CSS layout and traditional table layout is that the original positioning uses tables to control the spacing of text layout sections through table spacing or colorless and transparent GIF images; currently, the layer (div) is used to locate and control the section spacing through attributes such as margin, padding, and border of the layer.

1. Define DIV

Analyze a typical div definition 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) # fefefefe no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH: 60% ;}

Description:

• The layer name is sample. You can call this style with <div id = "sample"> on the page.
• MARGIN refers to the MARGIN left outside the border of the layer. It is used for MARGIN or to make a gap with other layers. "10px 10px 10px" represents "Top right bottom left" (clockwise direction) Four margins, if the same, can be abbreviated as "MARGIN: 10px ;". If the MARGIN is zero, it must be written as "MARGIN: 0px ;". Note: When the value is zero, except for the RGB color value 0%, it must be followed by the percent sign. In other cases, it may not be followed by the unit "px ". MARGIN is a transparent element and cannot define colors.
• PADDING refers to the blank between the border of the layer and the content of the layer. Same as margin, it specifies the distance from the top-Right Bottom left border to the content. If they are all the same, it can be abbreviated as "PADDING: 0px ". You can specify "PADDING-LEFT: 0px;" on the LEFT ;". PADDING is a transparent element and cannot define colors.
• BORDER refers to the BORDER of the layer, "BORDER-RIGHT: # CCC 2px solid;" defines the right border color of the layer as "# CCC", and the width is "2px ", the style is a "solid" straight line. To use the dotted line style, you can use "dotted ".
• BACKGROUND is the BACKGROUND of the definition layer. Define the image background in two levels. Use "url (../images/bg_logo.gif)" to specify the path of the background image, and then define the background color "# FEFEFE ". "No-repeat" indicates that the background image does not need to be repeated. If you need to repeat-x horizontally, repeat-y is used vertically ", repeat is used to repeatedly fill the entire background ". The following "right bottom;" indicates that the background image starts from the bottom right corner. If there is no BACKGROUND image, you can only define the BACKGROUND color BACKGROUND: # fefefefe
• COLOR is used to define the font COLOR. It has been described in the previous section.
• TEXT-ALIGN is used to define the content arrangement in the layer. center is centered, left is left, and right is right.
• LINE-HEIGHT defines the Row HEIGHT. 150% refers to 150% of the standard HEIGHT. It can also be written as follows: LINE-HEIGHT: 1.5 or LINE-HEIGHT: 1.5em.
• WIDTH is the WIDTH of the defined layer. You can use a fixed value, for example, 500px, or a percentage, as shown in "60% ". Note that this width only refers to the width of your content, excluding margin, border, and padding. But in some browsers, this is not so defined. You need to try more.

The actual performance of this layer is as follows:

Here is the demo content, here is the demo content,

Here is the demo content, here is the demo content,

Here is the demo content, here is the demo content,

Here is the demo content...

We can see that the border is 2px Gray, the background image is not repeated in the lower right corner, the content is 20 PX away from the left border, the content is centered, everything is the same as expected. Hoho, although not easy to understand, is the most basic. If you master 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. I will explain it later .)

2. CSS2 Box Model

Since the release of CSS1 in 1996, W3C organizations have suggested placing all the images on webpages in a box. Designers can create definitions to control the attributes of this box, these objects include paragraphs, lists, titles, images, and layers. <div>. The box model mainly defines four areas: content, padding, border, and margin ). The sample layer mentioned above is a typical box. For beginners, it is often difficult to understand the levels, relationships, and mutual influences between margin, background-color, background-image, padding, content, and border. Here we provide a 3D box model for your understanding and memory.

3. background processing is used for all secondary images.

Using XHTML + CSS layout, there is a technology that you don't get used to at the beginning. It should be said that it is a different way of thinking from the traditional table layout, that is: all secondary images are implemented using the background. Similar to this:

BACKGROUND: url (images/bg_poem.jpg) # fefefefe no-repeat right bottom;

Although can be directly inserted into the content, this is not recommended. Here, "secondary images" refer to images that are not part of the content to be expressed on the page, but only used for modification, interval, and reminder. For example, pictures in photo albums, pictures in news, and 3d box model pictures above are all part of the content. They can be directly inserted into the page using the element, other similar logo, title image, and list prefix images must be displayed in the background or CSS mode.

There are two reasons for doing this:

• Completely separate the performance from the structure (refer to another article: separation of understanding performance and structure), and use CSS to control all the appearance and performance, making it easy to revise.
• Make the page more easy to use and more friendly. For example, if a blind person uses a screen reader, the pictures implemented by background technology will not be read out.