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

This article shows you how the commonly used attributes in the DIV style are used, the content is concise and easy to understand, and it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Summary of DIV Styles

Recently in learning JavaScript, in order to control the control style of the example, suddenly have the idea of a collection of commonly used styles, so write the following, the following is a summary of div as an example, I hope to give you some help.

1. Attributes commonly used in DIV style:

1. Height: set the height of DIV.

2. Width: set the width of DIV.

Example:

Code div >

3. Margin: the attribute commonly used in this DIV style is used to set the extension margin of the DIV, that is, the distance to the parent container.

Example:

Code

Div > div >

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

Div > div >

8. Padding: the properties commonly used in this DIV style are used to set the inner margins of the DIV.

Example:

Code

Div > div >

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:

Code

Div > div >

13. Position: the common attributes in this DIV style set the positioning mode of the DIV.

Example:

Code

Div > div >

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

Div > div > div >

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: common attributes in this DIV style specify the style of the text in DIV, which can be followed by multiple styles of the text.

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. 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: common attributes in this DIV style specify 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: common properties in this DIV style refer to content overflow control. The values are scroll (always show scroll bar), visible (scroll bar is not shown, but the excess is visible), auto (scroll bar is shown when content is exceeded), hidden (content is hidden 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

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

33. Border: the common properties in this DIV style set the border style of DIV.

Example:

Code

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

Select style: label > noneoption > dashedoption > dottedoption > grooveoption > hiddenoption > insetoption > outsetoption > ridgeoption > doubleoption > solidoption > select > div >

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: the commonly used properties in this DIV style set the flow direction of DIV on the page. The values are left (left), right (right), and none.

50. Background: sets the background style of DIV.

Example:

Code

Div > div >

Description: DIV style commonly used attributes background can be directly followed by the background color, background picture, tiling style and other styles. 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:

Code

Div > the above is the common use of attributes in the DIV style. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.