The
style sheet provides a container box that will store all the operable styles of an object. Includes four aspects of the object itself, border whitespace, object borders, and object clearance.
for everyone to better understand the meaning of these attributes, and the relationship between them, look at the following diagram:
1. Border Blank (MARGIN)
, as shown in the figure, is at the outermost layer of the box model, including four properties.
The
format is as follows:
margin-top: Top blank distance
margin-right: Right blank distance
margin-bottom: Bottom blank distance
margin-left: Left blank distance
The distance of the
blank can be represented by a number with a length unit.
if the simplified way of using the above property is margin, you can then add four consecutive digits with length units to represent Margin-top, Margin-right, Margin-bottom, Margin-left, respectively. Each number should be separated by a space in between.
2. Object Border (BORDER)
The
, as shown in the figure, is between the border space and the object gap, including seven properties.
The
format is 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 width of the border at once, border-color the color of all the four sides of the border, you can write four colors consecutively, separated by a space. The contiguous set of borders is in the order of Border-top, Border-right, Border-bottom, Border-left.
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 dotted line.
dashed: The border is a short line.
Solid: The border is a solid line.
Double: The border is two lines.
Groove: Displays a 3D border with different effects based on the color property
Ridge: Displays a 3D border with different effects based on the color property
inset: Displays a 3D border with different effects based on the color property
outset: Displays a 3D border with different effects based on the color property
3. Object Clearance (PADDING)
, as shown in the figure, is between the object border and the object, including four properties.
basic format is as follows:
padding-top: Top Clearance
Padding-right: Right Clearance
padding-bottom: Bottom Clearance
Padding-left: Left clearance
and margin similar, padding can also use padding one-time set all the object gap, format and margin similar, no longer enumerated.
13. Show control style
basic format is as follows:
Display: Parameter
parameter value range:
block (default): Wraps the line before and after the object
inline: Do not wrap before and after the object
List-item: Wrapping lines before and after objects, adding bullets
None: No display
14. Blank control style
basic format is as follows:
The
whitespace property determines how spaces within an element are handled.
white-space: Parameter
parameter value range:
Normal: Replace multiple spaces with one to display
Pre: Faithfully press ENTER to display space
nowrap: No Line wrapping
but note that Write-space is also a block-level attribute.
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
