Html basics (1): Practical CSS labels and attribute values

I. In the preliminary HTML development stage, the content structure of the entire webpage must be analyzed first: that is, the webpage content should be classified in general, such as nav content foot, each type must have a special Div

Ii. Common CSS labels and attributes:

1. Width: width. Its value can be:

(1) Auto, width = width of the parent label

(2) xx %. The current tag width is XX % of the parent tag.

(3) Px, fixed Label Size

(4) inherit: inherits the value of the parent tag.

Note: The difference between auto and 100%: The width obtained by auto is the content width + the width of margin; 100%, it only contains the content width, does not contain margin, so sometimes 100% is used, the last Div may be larger.

2. Make the background transparent: filter: alpha (opacity = 30 );

3. Border prototype: Border: width style color. You can set the Border Value in sequence.

(1) The following values can be obtained for a style:

4. margin,

(1) note that after the relative sides of the "Up and down" elements are set to margin, their distance is the maximum value of margin,

Eg: div1 on, margin-Right = 50

Div2 down, margin-Left = 60

Therefore, the distance between div1 and div2 is not 50 + 60 = 120, but the maximum value of margin is 60. This fusion will invalidate margin-right.

5. Hide the scroll bar: overflow-X: hidden,

(1) This setting can only take effect after being added to the body.

(2) An important application of this nature is the ability to drag the screen and slide between the left and right.
6. Text-align: horizontal alignment of items with pictures and fonts, such as text, images, and links. Optional values include left, center, and right.

7. It is relatively easy to directly use text-align: center to make a text in the horizontal center. However, to make it in the vertical center, you can only use padding margin and other methods.

8. If the background is a monochrome image, we can cut the image into a few pixels and set Background: URL (XX) Repeat;