CSS Practical Tutorial (3)

Twelve． Control the style of BOX

The style sheet specifies a container BOX, which will store all the operable styles of an object. It includes four aspects: the object itself, border blank, object border, and object gap.



In order for everyone to better understand the meaning of these attributes and the relationship between them, please look at the following diagram:

1. Border blank (MARGIN)

As shown in the picture, it is located at the outermost layer of the BOX model and includes four attributes.

The formats are as follows:

·margin-top: top margin distance

·margin-right: right margin distance

·margin-bottom: bottom margin distance

·margin-left: left margin distance

blank Distances can be expressed as numbers with length units.

If you use margin, a simplified method of the above attributes, you can add four consecutive numbers with length units to represent margin-top, margin-right, margin-bottom, and margin-left respectively. There is a gap between each number. Separate with spaces.

2. Object border (BORDER)

As shown in the figure, it is located between the border blank and the object gap, and includes seven attributes.

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

Among them, border-width can set the width of all borders at once, and border-color sets the color of the four borders at the same time. , you can write four colors continuously and separate them with spaces. The above-mentioned continuously set borders are in the order of border-top, border-right, border-bottom, and border-left.

Border-style is slightly more complicated than other attributes, because it also includes multiple border style parameters:

·none: no border.

·dotted: The border is a dotted line.

·dashed: The border is a long and short line.

·solid: The border is a solid line.

·double: The border is double line.

·groove: Displays 3D borders with different effects according to the color attribute

·ridge: Displays 3D borders with different effects according to the color attribute

·inset: Displays 3D borders with different effects according to the color attribute

·outset: Displays 3D borders with different effects according to the color attribute Display 3D borders with different effects

3. Object gap (PADDING)

As shown in the figure, it is located between the object border and the object, and includes four attributes.

The basic format is as follows:

·padding-top: top gap

·padding-right: right gap

·padding-bottom: bottom gap

·padding-left: left gap

Similar to MARGIN, PADDING is also You can use padding to set all object gaps at once, and the format is similar to MARGIN, so I won’t list them one by one.
Thirteen． Display control style

The basic format is as follows:

display: parameter

Parameter value range:

·block (default): line breaks before and after the object

·inline: no line breaks before and after the object

·list- item: Line breaks before and after the object, adding bullet symbols

·none: No display

Fourteen. White space control style

The basic format is as follows:

The white space attribute determines how to handle spaces within the element.

white-space: Parameter

Parameter value range:

normal: Replace multiple spaces with one to display

PRe: Display spaces faithfully as input

nowrap: Prohibit line breaks

But please note that , write-space is also a block-level attribute.

.Full text finished.

The above is the content of CSS practical tutorial (3). For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!