CSS Grammar Handbook (iii) text fill, border, border and position properties (i)

First, Box fill properties

1, Padding-bottom
Padding-left
Padding-top
Padding-right

Function: Each container has a border that sets the distance between the border and the elements in the box.
Numerical:
Length-Sets the relative or absolute value. After the number, specify the unit of measurement as follows: mm, CM, in, PT, PX, PC, ex, EM. The EM and ex settings produce font sizes relative to the parent font.
Percent-sets the border as a percentage of the parent element.
Description: The padding value cannot use negative values, but can be decimals.
Example

2, padding

Function: is a shorthand property for setting the spacing between the top, bottom, left, and right border and content elements.
Value: Ibid.
Note: A single value can be used to fill each edge evenly; If you use two values, the first value is used to fill up and down, the second value is used to fill the left and right, and if you use three values, the top padding, the left and right padding, and the bottom padding, if you use four values, are used for top, left, bottom, You can mix numeric types.
Example

Second, box border properties

1, Border-top
Border-bottom
Border-right
Border-left

Function: These four attributes are shorthand properties, set the top, bottom, right, and left border properties, respectively. By default, borders do not have style settings.
Value: Total three border properties
Border-width: The value is thin, medium, thick, or the specified length.
Border-style: Sets the shading used to decorate the border. You can set the following styles: None, dotted,doshed, solid, double, groove, Ridge, inset, outset.
Border-color: Sets the border color.
Example

2, Border-top-width
Border-bottom-width
Border-right=width
Border-left-width

Function: Sets the thickness of each border separately.
Numerical:
Thin-thin border.
Medium-Medium line width.
Thick-thick line.
Length-Sets the width of the border in relative or absolute units.
Example

3, Border-width

Features: Shorthand property, you can set the width of four borders at the same time.
Numerical:
Thin-thin border.
Medium-Medium line width.
Thick-thick line.
Length-Sets the width of the border in relative or absolute units.
Description: See padding instructions.
Example:

4, Border-color

Features: Shorthand property, sets the color value of four borders.
Value: You can use a color name or an RGB value. If you specify a single color, the four borders are displayed as this color, and if you specify two colors, the order is up and down, or left and right, if you specify three colors, the order is top, left, bottom, and if four colors are specified, the order is top, left, and bottom.
Description: The color name is as follows
Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.
For RGB values, you can specify three methods
#rrggbb; RGB (R,G,B); RGB (r%,g%,b%)
Example:

5, Border-style

Features: For displaying borders and specifying border styles.
Numerical:
None-No border is displayed, default value
Dotted-Dot Line
Dashed-pseudo line
Solid-Solid Line
Double-Two lines
Groove-3d into line
Ridge-3d Ridge Line
Inset-make the page sink into the sense
Outset-make the page feel
Description: Not all browsers can display styles such as ridge, inset, outset, and some browsers draw Narimi lines for all borders.

6, border

Features: Shorthand property, setting all border properties.
Numerical:
Border-width-value thin, medium, thick, or specified length.
Border-style-value None, dotted, dashed, solid, double, groove, Ridge, inset, outset
Border-color-Available color names or RGB values.
Note: Unlike other shorthand properties, each setting can take only one value, which acts evenly on the sides of the box.
Example:

The above is the CSS syntax Manual (c) text fill, border, border and position attributes (a), more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

