CSS Application Basics Tutorial (6) Block nature

css| Basic Tutorials

The main role of C s in this chapter

This chapter describes the block-nature of CSS directives and their application and characteristics, you can set and control the location of blocks, size and edge width and other properties. This chapter will also be divided into two parts for you, the first part to talk about the name of the block and the concept of the introduction, for the block has a point of concept, the second part of the block to enter the nature of the CSS instructions introduced.

The names and concepts of each part of the block

In fact, we can also divide the so-called "block" into several parts. From the outside to introduce you: MARGIN: Edge, although it is a transparent part, but can be adjusted by the edge width to achieve the purpose of the content element position adjustment. BORDER: Border, is the part of the bounding box, through the CSS instructions you can control the width of the border, color and style, no longer rigid! PADDING: Filler, which is the distance and space between the content element and the frame, can also be used to control the size of the CSS commands. element: A content element, that is, the content that you place inside the block, or text, or graphics, or all other elements. Incidentally, the so-called chunk width refers to the width of the entire containing edge, while the element width refers only to the width of the content element. With these basic concepts and understanding of the various parts of the block, the next step is to introduce the various parts of the control block of the CSS instructions respectively!

Block nature of C s S instruction

Margin-top Set Upper edge width Margin-right Set Right edge width Margin-bottom set down edge width Margin-left Set left edge width Support: IE3, IE4, NC4 Applicable: block elements Possible values: <length> Length units, please refer to the first chapter of the basic units of the relevant instructions <percentage> Percent, relative to element width size Auto Using browser preset values Preset values: 0 Inheritance: None Generic example: DIV {margin-top:20pt} Coaxial Example: <div style= "margin-top:20pt" > Margin integrated set edge width support: IE3, IE4, NC4 Applicable: block elements Possible values: Set the edge width of the Top,right,bottom,left <length> {1,4} Length units, please refer to the first chapter of the basic units of the relevant instructions <percentage> {1,4} Percent, relative to element width size Auto {1,4} Using browser preset values Preset values: None Inheritance: None Generic example: DIV {margin:20pt 15pt 10pt 5pt} Coaxial Example: <div style= "margin:20pt 15pt 10pt 5pt" > to be included, if four legal settings are specified, they are applied to four edges, and if only one legal setting is specified, it applies uniformly to four side holders If only two or three valid values are specified, the unspecified edges apply the width of the edges to the set value. DIV {margin:20pt} →top=20pt;right=20pt;bottom=20pt;left=20pt DIV {margin:20pt 15pt} →top=20pt;right=15pt;bottom=20pt;left=15pt DIV {margin:20pt 15pt 10pt} →top=20pt;right=15pt;bottom=10pt;left=15pt Border-top-width set Top Border width Border-right-width Set Right Border width Border-bottom-width Set Bottom Border width Border-left-width set left Border width Support: IE4, NC4 Applicable: block elements Possible values: Thin < medium < thick Thin Unified absolute units, depending on the browser Medium Unified absolute units, depending on the browser Thick Unified absolute units, depending on the browser <length> Length units, please refer to the first chapter of the basic units of the relevant instructions Preset value: Medium Inheritance: None Generic example: DIV {border-top-width:2pt} Coaxial Example: <div style= "border-top-width:2pt" > Border-width comprehensive set Border width support: IE4, NC4 Applicable: block elements Possible values: Sets the border width of the Top,right,bottom,left Thin {1,4} Unified absolute units, depending on the browser Medium {1,4} Unified absolute units, depending on the browser Thick {1,4} Unified absolute units, depending on the browser <length> {1,4} Length units, please refer to the first chapter of the basic units of the relevant instructions Preset values: None Inheritance: None Generic example: DIV {border-width:4pt 3pt 2pt 1pt} Coaxial Example: <div style= "border-width:4pt 3pt 2pt 1pt" > to be included, if four valid settings are specified, they are applied to four borders, and if only a valid set value is specified, the four borders are applied uniformly If only two or three legal settings are specified, the unspecified border applies the width of the edge to the value. DIV {border-width:2pt} →top=2pt;right=2pt;bottom=2pt;left=2pt DIV {border-width:2pt 3pt} →top=2pt;right=3pt;bottom=2pt;left=3pt DIV {border-width:2pt 3pt 4pt} →top=2pt;right=3pt;bottom=4pt;left=3pt Border-top-color Set top Border color Border-right-color set the right border color Border-bottom-color set the bottom border color Border-left-color set the color of the left border Support: IE4, NC4 Applicable: block elements Possible values: <color> To set the color, please refer to the first chapter color use of the relevant instructions Preset value: The value of a color property Inheritance: None Generic example: DIV {border-top-color:blue} Coaxial Example: <div style= "Border-top-color:blue" > Border-color Integrated Set Border color support: IE4, NC4 Applicable: block elements Possible values: Set the border color of top,right,bottom,left <color> {1,4} To set the color, please refer to the first chapter color use of the relevant instructions Preset values: None Inheritance: None General Example: DIV {border-color:red GREEN BLUE yellow} Coaxial Example: <div style= "border-color:red GREEN BLUE Yellow" > to be included, if four valid settings are specified, the four borders are applied, and if only one legal setting is specified, is applied uniformly to four borders, and if only two or three valid values are specified, the unspecified borders apply the color setting values of the edges, and if this property is not specified, a color-specific setting is applied. Div{border-color:red} →top=red;right=red;bottom=red;left=red Div{border-color:red GREEN} →top=red;right=green;bottom=red;left=green Div{border-color:red GREEN BLUE} →top=red;right=green;bottom=blue;left=green Border-top-style set top Border style Border-right-style Set right border style Border-bottom-style Set bottom Border style Border-left-style set left border style Support: IE4, NC4 Applicable: block elements Possible values: None Do not show borders Dotted Dotted lines (IE4, NC4 browsers as solid lines) Dashed Short Line (IE4, NC4 browser as solid line) Solid Solid line Double Double Line Ridge 3D Convex Line Groove 3D Concave Line Outset 3D uplift (IE4 not shown) Inset 3D embedding (IE4 not shown) Preset values: None Inheritance: None Generic example: DIV {Border-top-style:inset} Coaxial Example: <div style= "Border-top-style:inset" > Border-style comprehensive set border style support: IE4, NC4 Applicable: block elements Possible values: Set the Top,right,bottom,left border style None {1,4} Do not show borders Dotted {1,4} Dotted lines (IE4, NC4 browsers as solid lines) Dashed {1,4} Short Line (IE4, NC4 browser as solid line) Solid {1,4} Solid line Double {1,4} Double Line Ridge {1,4} 3D Convex Line Groove {1,4} 3D Concave Line outset {1,4} 3D uplift (IE4 not shown) inset {1,4} 3D embedding (IE4 not shown) Preset values: None Inheritance: None Generic example: DIV {Border-style:ridge groove outset inset} Coaxial Example: <div style= "Border-style:ridge groove outset inset" > to be included, if four valid settings are specified, the four borders are applied, and if only one legal setting is specified, is applied uniformly to four borders, and if only two or three valid values are specified, the unspecified borders apply the style set values for the edges. Div{border-width:outset} →top=outset;right=outset;bottom=outset;left=outset Div{border-width:outset inset} →top=outset;right=inset;bottom=outset;left=inset Div{border-width:outset Inset Ridge} →top=outset;right=inset;bottom=ridge;left=inset Border-top comprehensive set up border property Border-right Set Right Frame property Border-bottom Set Bottom Border property Border-left Set left box nature Support: IE4, NC4 Applicable: block elements Possible values: <border-width> To set the width of the border, please refer to the above description and instructions <border-style> Set the border style, please refer to the above description and instructions <border-color> To set the border color, refer to the above description and instructions Preset values: None Inheritance: None Generic example: DIV {border-top:2pt solid BLUE} Coaxial Example: <div style= "border-top:2pt solid BLUE" > Border comprehensive set border nature support: IE4, NC4 Applicable: block elements Possible values: <border-width> Set the border width, please refer to the above description and instructions <border-style> Set the border style, please refer to the above description and instructions <border-color> Set the border color, please refer to the above description and instructions Preset values: None Inheritance: None Generic example: DIV {border:2pt solid BLUE} Coaxial Example: <div style= "border:2pt solid BLUE" > to be included, this instruction can only specify a set of values, that is, the upper right and left four borders will apply the same set of values, but not the individual borders of the set value changes. Padding-top Set Top filler width Padding-right Set Right padding width Padding-bottom Set padding width below Padding-left Set left padding width Support: IE4, NC4 Applicable: block elements Possible values: <length> Length units, please refer to the first chapter of the basic units of the relevant instructions <percentage> Percent, relative to element width size Preset values: 0 Inheritance: None Generic example: DIV {padding-top:5pt} Coaxial Example: <div style= "padding-top:5pt" > Padding comprehensive set filler width support: IE4, NC4 Applicable: block elements Possible values: Set the padding width of top,right,bottom,left in sequence <length> {1,4} Length units, please refer to the first chapter of the basic units of the relevant instructions <percentage> {1,4} Percent, relative to element width size Preset values: None Inheritance: None Generic example: DIV {padding:2pt 5pt 2pt 5pt} Coaxial Example: <div style= "padding:2pt 5pt 2pt 5pt" > to be included, if four valid settings are specified, they are applied to four fillers, and if only a valid set value is specified, the four fillers are applied uniformly If only two or three legal settings are specified, the unspecified padding applies the width of the edge to the value. DIV {padding:1pt} →top=1pt;right=1pt;bottom=1pt;left=1pt DIV {padding:1pt 2pt} →top=1pt;right=2pt;bottom=1pt;left=2pt DIV {padding:1pt 2pt 3pt} →top=1pt;right=2pt;bottom=3pt;left=2pt