12. Control the style of the box
The style sheet specifies a container box that will store all the operable styles of an object. Including the object itself, border blank, object border, object clearance four aspects.
For a better understanding of the meaning of these attributes and their relationship to each other, see the following illustration:
1. Border Blank (margin)
, located at the outermost layer of the box model, including four properties.
The formats are as follows:
margin-top: Top blank distance
margin-right: Right blank distance
margin-bottom: Bottom blank distance
margin-left: Left blank distance
The blank distance can be expressed as a number with a length unit.
If you use the simplified method of the above attribute margin, you can add four consecutive numbers with length units, respectively, to represent Margin-top, Margin-right, Margin-bottom, Margin-left, each number in the middle of a space separated.
2. Object Border (BORDER)
, which is located between the border padding and the object voids, and includes seven properties.
The formats are as follows:
border-top: Top Border width
border-right: Right Border width
border-bottom: Bottom Border width
Border-left: Left Border width
border-width: All border widths
border-color: Border color
border-style: Border Style parameters
Where border-width can set all the border width at once, border-color simultaneously sets the color of the four-sided border, you can write four colors consecutively, separated by a space. The borders of the above contiguous settings are in the order of Border-top, Border-right, Border-bottom, Border-left, and so on.
Border-style is slightly more complex than other properties because it also includes parameters for multiple border styles:
None: No border.
dotted: The border is a point line.
dashed: The border is a short and long line.
Solid: The border is a solid line.
Double: The border is a double line.
Groove: Displays 3D borders of different effects based on the Color property
Ridge: Displays 3D borders of different effects based on the Color property
inset: Displays 3D borders of different effects based on the Color property
outset: Displays 3D borders of different effects based on the Color property
3. Object Clearance (PADDING)
, which is located between the object's border and the object, and includes four properties.
The basic format is as follows:
padding-top: Top Clearance
Padding-right: Right Gap
Padding-bottom: Bottom Gap
Padding-left: Left Gap
Similar to margin, padding can also use padding to set all the object clearance at once, the format is similar to margin, no longer listed.
13. Display control style
The basic format is as follows:
Display: Parameters
Parameter value range:
block (default): line wrapping before and after the object
Inline: No wrapping before or after the object
List-item: Line wrapping before and after the object, adding bullets
None: No display
14. Blank control style
The basic format is as follows:
The blank property determines how spaces within the element are handled.
White-space: Parameters
Parameter value range:
Normal: Replace multiple spaces with one to display
PRe: Faithfully press input to display spaces
NoWrap: No Line break
Note, however, that Write-space is also a block-level attribute.
. Complete the full text.
The above is the CSS Practical tutorial (three) of the content, more related articles please pay attention to topic.alibabacloud.com (www.php.cn)!
