Shulou(Shulou.com)06/02 Report--

What are the common attributes of DIV style? I believe many inexperienced people don't know what to do about it. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

And you focus on the use of DIV style common properties, including Height: set the height of DIV, Width: set the width of DIV, and margin and Padding properties.

DIV style Common Properties

1. Common attributes:

1. Height: set the height of DIV.

2. Width: set the width of DIV.

Example:

Div >

3. Margin: used to set the extension margin of the DIV, that is, the distance to the parent container.

Example:

1 2 3 4 5div > 6 7div >

Description: margin: followed by four distances to the upper-right-lower-left distance of the parent container; you can see the effect of the edge distance from white DIV to black DIV in the example. You can also set the distance of these four sides separately, using the following attributes:

4. Margin-left: the distance to the left border of the parent container.

5. Margin-right: the distance to the right border of the parent container.

6. Margin-top: the distance to the upper border of the parent container.

7. Margin-bottom: the distance to the lower border of the parent container.

Example:

Code

1 2 3 6 7div > 8 9div > 10

8. Padding: used to set the inner margin of DIV.

Example:

1 2 3div > 4 5div > 6

Description: the format of padding is the same as that of margin, which can be learned by comparison. You can see the effect of this property by looking at the margin between black DIV and white DIV. It is also important to note that the distance set by padding is not included in its own width and height (in IE7 and FF). For example, if a DIV width sets 100px and padding-left sets 50px, then the DIV will display 150px width on the page. You can also set the inside margin of the DIV with the following four properties:

9. Padding-left: left inner margin.

10. Padding-right: right inside margin.

11. Upper inner margin of padding-top;.

12. Padding-bottom: lower inner margin.

Example:

Div > div >

13. Position: sets the positioning mode of DIV.

Example:

Code

12 36 7div > 8 9 12 13div > 14 15 18 19div > 20 21div > 22 23 26 27div > 28 29 32 33div > 34 35 38 39div >

Description: there are four attributes of position: static, fixed, relative and absolute. Relative and absolute are commonly used. If specified as static, DIV follows HTML rules; if specified as relative, you can use top, left, right, and bottom to set the offset of DIV in the page, but layers cannot be used at this time; if specified as absolute, you can use top, left, right, and bottom to absolutely locate DIV; if specified as fixed, the position of DIV in IE7 and FF will remain fixed relative to the screen, and there will be no effect in IE6.

14. Left: sets the position of the object relative to the left boundary of the nearest anchored object in the document hierarchy.

15. Top: sets the position of the object relative to the upper boundary of the nearest anchored object in the document hierarchy.

16. Right: sets the position of the object relative to the right boundary of the nearest anchored object in the document hierarchy.

17. Bottom: sets the position of the object relative to the lower boundary of the nearest anchored object in the document hierarchy.

18. Z-index: sets the cascading order of DIV.

Example:

Code

12 3div > 45 8 9div > 10 11 12 13div > 14

Note: in the above example, if the z-index attribute is not set, the blue DIV should be in the middle, but now the effect is blue on the top. It is also important to note that when using the z-index attribute, position must be specified as absolute.

19. Font: specifies the style of text in DIV, which can be followed by multiple styles of text.

Example:

Bright moon, when wast thou made? Holding my cup, I ask of the blue sky. I do not know the heavenly palace, what year is tonight? I want to go back by the wind, lest Qionglou Yuyu, the high place can not beat the cold. Dance to make a clear shadow, how does it seem to be in the world? Turn to Zhu Pavilion, low Kehu, according to sleepless. There should be no hate, why should we say goodbye? People will be reunited and separated, and the moon will be full and missing. May people stay together for a long time. Div >

Description: font can be followed by multiple attributes of the text style, such as font weight, font size, what kind of font and so on. You can also set them separately with the following properties:

20. Font-family: set the font name to be used

21. Font-weight: specify the thickness of the text, with values such as boldbolderlighter, etc.

22. Font-size: specifies the size of the text

23. Font-style: specifies the text style, with values such as italicnormaloblique, etc.

24. Color: specifies the text color.

25. Text-align: specifies the horizontal alignment of the text, whose value is center (center) leftrightjustify.

26. Text-decorator: used for decorating text. Its value is a combination of noneunderlineoverlineline-through and blink.

(there is no flicker effect in IE, but there is effect in FF. Looking forward to the expert's advice,)

27. Text-indent: sets the indentation of the text.

28. Text-transform: sets the case of the text. Its values are lowercaseuppercasecapitalize (uppercase) none.

Example:

Code

Bright moon, when wast thou made? Holding my cup, I ask of the blue sky. I do not know the heavenly palace, what year is tonight? I want to go back by the wind, lest Qionglou Yuyu, the high place can not beat the cold. Dance to make a clear shadow, how does it seem to be in the world? Turn to Zhu Pavilion, low Kehu, according to sleepless. There should be no hate, why should we say goodbye? People will be reunited and separated, and the moon will be full and missing. May people stay together for a long time. AbcdefghijklmnopqRSTUVWXYZ div >

29. Overflow: content overflow control. The values are scroll (always show scroll bar), visible (do not show scroll bar, but the excess part is visible), auto (show scroll bar when content exceeds), hidden (hide content when content is exceeded).

30. Direction: the flow of content. The values are ltr (from left to right) and rtl (from right to left).

31. Line-height: specifies the line height of the text.

32. Word-spacing: word spacing.

Example:

Code

When will there be a bright moon? Holding my cup, I ask of the blue sky. I do not know the heavenly palace, what year is tonight? I want to go back by the wind, lest Qionglou Yuyu, the high place can not beat the cold. Dance to make a clear shadow, how does it seem to be in the world? Turn to Zhu Pavilion, low Kehu, according to sleepless. There should be no hate, why should we say goodbye? People will be reunited and separated, and the moon will be full and missing. May people stay together for a long time. When will there be a bright moon? Holding my cup, I ask of the blue sky. I do not know the heavenly palace, what year is tonight? I want to go back by the wind, lest Qionglou Yuyu, the high place can not beat the cold. Dance to make a clear shadow, how does it seem to be in the world? Turn to Zhu Pavilion, low Kehu, according to sleepless. There should be no hate, why should we say goodbye? People will be reunited and separated, and the moon will be full and missing. May people stay together for a long time. When will there be a bright moon? Holding my cup, I ask of the blue sky. I do not know the heavenly palace, what year is tonight? I want to go back by the wind, lest Qionglou Yuyu, the high place can not beat the cold. Dance to make a clear shadow, how does it seem to be in the world? Turn to Zhu Pavilion, low Kehu, according to sleepless. There should be no hate, why should we say goodbye? People will be reunited and separated, and the moon will be full and missing. May people stay together for a long time. When will there be a bright moon? Holding my cup, I ask of the blue sky. I do not know the heavenly palace, what year is tonight? I want to go back by the wind, lest Qionglou Yuyu, the high place can not beat the cold. Dance to make a clear shadow, how does it seem to be in the world? Turn to Zhu Pavilion, low Kehu, according to sleepless. There should be no hate, why should we say goodbye? People will be reunited and separated, and the moon will be full and missing. May people stay together for a long time. 12 13div >

33. Border: sets the border style of DIV.

Example:

Div >

Description: border followed by the border style, width, color and other properties. You can also set it separately with the following properties.

34. Border-width: sets the width of the border.

35. Border-color: sets the color of the border.

36. Border-style: sets the style of the border.

Example:

Code

1 Select style: label > 23 6 7noneoption > 8 9dashedoption > 10 11dottedoption > 12 13grooveoption > 14 15hiddenoption > 16 17insetoption > 18 19outsetoption > 20 21ridgeoption > 22 23doubleoption > 2425solidoption > 26 27select > 28 29 30 31div >

Description: border sets four borders at the same time. You can also set one or more edges individually, using the following properties:

Border-top: sets the top border style.

37. Border-bottom: sets the style of the bottom border.

38. Border-left: sets the left border style.

39. Border-right: sets the style of the right border.

Note: a side frame of a style can also be set separately, the above border as an example can be used: border-top-style, border-top-width, border-top-color to set, because the use of each border is the same, so not in the example.

40. Display: set display properties. Its values are block, none.

41. Float: sets the flow direction of DIV on the page. The values are left (left display), right (right display), none.

50. Background: sets the background style of DIV.

Example:

Div > div >

Description: after background, you can directly follow the background color, background picture, tiling style and so on. You can also set them separately with the following properties.

51. Background-color: sets the background color.

52. Background-attachment: the way to attach the background image. The values are scroll and fixed.

53. Background-image: specify a background picture.

54. Background-repeat: the tiling method of the background image. Its values are no-repeat (non-tiling), repeat (tiling in both directions),

Repeat-x (horizontal tiling), repeat-y (vertical tiling).

55. Background-position: locate the background position in the DIV. Its value has different combinations of topbottomleftright. You can also use coordinates

Specify a specific location.

Example:

Div > after reading the above, have you mastered the methods of common properties of DIV style? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.