CSS frame style)

 

Serial number	Description	Markup syntax
1	Border white	{Margin: margin-top margin-right margin-bottom margin-left}
2	Whitelist	{Padding: padding-top padding-Right padding-bottom padding-left}
3	Border Width	{Border-width: border-top-width border-right-width border-bottom-width border-left-width} Width: thin | medium | thick | value
4	Border color	{Border-color: Numeric value} numeric value: Top, right, bottom, left color values respectively
5	Border Style	{Border-style: None | hidden | inherit | dashed | Solid | double | inset | outset | ridge | groove}
6	Edge Frame	{Border: border-width border-style color}
	Top Frame	{Border-top: border-top-width border-style color}
	Right side frame	{Border-Right: border-right-width border-style color}
	Bottom Frame	{Border-bottom: border-bottom-width border-style color}
	Left side frame	{Border-left: border-left-width border-style color}
7	Width	{Width: length | percentage | auto}
8	High	{Height: Numeric value | auto}
9	Float	{Float: Left | right | none}
10	Clear Division	{Clear: none | left | right | both}

A style sheet defines a container box that stores all the operable styles of an object. It includes four aspects: object itself, border blank, object border, and object gap.
For a better understanding of the meaning and relationship between these attributes, see the following figure:

1. White borders: margin

Syntax:{Margin: margin-top margin-right margin-bottom margin-left}
Note:Located in the outermost layer of the box model, including four attributes.
Format:
· Margin-top: margin on top
· Margin-Right: margin on the right
· Margin-bottom: margin at the bottom
· Margin-left: left blank distance
Example:
Body {margin: 5em}/* set all boundaries to 5em */
P {margin: 2em 4em}/* the upper and lower boundary is 2em, and the left and right boundary is 4em */
Div {margin: 1em 2em 3em 4em}/* the top boundary is 1em, the right boundary is 2em, the bottom boundary is 3em, and the left boundary is 4em */
Body {margin-top: 0}/* removes the upper boundary of the object */
P. Narrow {margin-Right: 50%}
Dt {margin-bottom: 3em}
If the boundary is vertical (OVERLAPPING), the maximum boundary value is used. The horizontal direction does not.
Note:The margin simplification method can be followed by four consecutive numbers with length units to represent margin-top, margin-right, margin-bottom, and margin-left, respectively, separate the numbers with spaces.

2. Fill in the white space: padding

Syntax:{Padding: padding-top padding-Right padding-bottom padding-left}
Purpose:Is a short attribute used to set the spacing between the top, right, bottom, left border and content elements
Note:
· Padding-top padding
· Pad-Right
· Padding-bottom padding
· Padding-left padding
Example:
BC {padding: 1em 2em 3em 4em}/* Top, right, bottom, and left are */
BC {padding: 2em 4em 5em}/* fill in 2, right fill in 4em, bottom fill in 5em, left fill in 4em */
BC {padding: 2em 4em}/* the upper and lower values are 2em, and the left and right values are 4em */
BC {padding: 2em}/* Top, right, bottom, left are 2em */
Note:A single value can be used to fill the edges in an equal distance. If two values are used, the first value is used for filling up and down, and the second value is used for filling left and right. If three values are used, top fill, left fill, and bottom fill. If four values are used, they are respectively used for top, right, bottom, and left fill. You can mix numeric values. Note: similar to margin, paddingg can also set all object gaps at a time. The format is similar to margin.

3. Border Width: border-Width

Syntax:{Border-width: border-top-width border-right-width border-bottom-width border-left-width}
Width:Thin | medium | thick | value

4. border color: border-color

Syntax: {border-color: numerical value}
Note: values represent the top, right, bottom, and left color values respectively.

5. Border style: border-style

Syntax:{Border-style: None | hidden | inherit | dashed | Solid | double | inset | outset | ridge | groove}
Note:
· None no border
· Hidden hide borders
· Inherit inherits the parent border
· The dashed border is a long and short line
· Dotted border is a dot line
· The solid border is a solid line.
· The double border is a double line.
· Inset displays 3D borders with different effects based on the color attribute
· Outset displays 3D borders with different effects based on the color attribute
· Ridge displays 3D borders with different effects based on the color attribute
· Groove displays 3D borders with different effects based on the color attribute
Note:A value between 1 and 4 represents four borders, and two represents the upper and lower sides and the left and right sides.

6. Border: border

Syntax:{Border: border-width border-style color}
Purpose:Is located between the border space and the object space, including seven attributes.
Note:
· Border-top Border Width | border style | color
· Border-Right Border Width | border style | color
· Border-bottom Bottom Border Width | border style | color
· Border-left Left Border Width | border style | color
· Border-width: width of all borders
Thin Line | medium Medium Line | thick line

· Border-color: border color
· Border-style: border style parameters
Note:Border-width can be used to set the width of all borders. When border-color is used to set the color of the four border borders, four colors can be written consecutively and separated by spaces. The border is set in the order of border-top, border-right, border-bottom, and border-left.

7. Width: width

Syntax:{Width: Value | percentage | auto}
Purpose:Set the element width. The browser adjusts the image according to the width.
Example:Input. Button {width: 10em}

8. Height: Height

Syntax:{Height: Numeric value | auto}
Purpose:Same as the width attribute, the height can be used to set the ratio of the image.
Example:IMG. Foo {width: 40px; Height: 40px}

9. Float

Syntax:{Float: Left | right | none}
Purpose:Used to place elements outside the general element stream layout rules
Note:
· None is not changed.
· Left: place the content of other elements to the right of the floating element.
· Right: place the content of other elements to the left of the floating element.
Note:The floating attribute allows the webpage maker to wrap text around an element. this is the same as align = left and align = right of the IMG element in HTML 3.2, but css1 allows all objects to "float", not just images and tables as in HTML 3.2.

10. Clear: Clear

Syntax: {clear: none | left | right | both}
function: allows or disables placement of other elements (usually linear) next to a specified element)
description:
· left: place the element under the floating element on the left.
· Right: place the element under the floating element on the right.
· The floating element cannot be placed on both sides. element
note: the clear attribute specifies whether an element can float beside it. The value left moves the element to the floating element on its left; the value right moves to the floating element on its right. Others also have the default none value, and the none value that moves the element to the floating element on both sides. This property is similar to the function
in HTML 3.2, but it can be applied to all elements.