CSS Basics 3

1 -row high calculation

Our line-High calculation formula:

Row height = top spacing + bottom spacing + text size

The line height of the CSS:

Row height = distance between two baselines

Role:

Sets the height at which a line of text occupies, the true meaning or the position of the lines where the text is related

2 line height and unit

Length unit: PX em% without unit

When the line height is directly on the target label

units	Line height	 
px	Set the value of	 
em	FONT size * Set value	 
%	FONT size * Set value	< P class= "P11" >&NBSP;
no units	FONT size * Set the value	&NBSP;

Sets the row height for the parent element, and affects the child element

Unit	The row height after the child element is calculated
Px	The value set in the parent element	Calculate first, then inherit
Em	The value set in the parent element * The font size of the parent element	Calculate first, then inherit
%	The value set in the parent element * The font size of the parent element	Calculate first, then inherit
Without units	The value set in the parent element * The font size of the child element	Inherit first, then calculate

Two- box model

1 understanding of the box model

2 Role of the box model

Layout

the border of three-box model

1 Border-related properties

Border-width control Border width

length is used to assign a value

Medium default width

Thin less than the default width

Thick is greater than the default width

Border-style control border style

None no border

Solid implementation

Dotted dot line

Dashed dashed line

Border-color Setting the color of the border

Color representation

2 Border ligatures

No order, all can be omitted

Note: Border-style default to None, if ligatures without Border-style, will not see the effect

the padding of the four-box model

1 padding properties and padding ligatures

padding control the distance between content and borders

Four directions of the padding

Padding-top

Padding-right

Padding-bottom

Padding-left

Padding's ligatures

1 Only one value:

The top right and bottom left of the inner margin are the values.

2 Write two values

When a ligatures writes two values:

The top and bottom padding is the first value, and the left and right padding is the second value

3 Write three values

ligatures when writing 3 values:

The top padding is the first value, the left and right padding is the second value, and the bottom padding is the third value

4 Write 4 values

When writing four values:

The order of the upper right and bottom left, respectively

2 effects of padding and border on the box

The box's actual size will be affected when the box is set to the border and the inner margin.

The actual width of the box = left border + Left padding + set width + right padding + right border

margin of the five-box model

1 margin properties and margins ligatures

Margin: controls the distance between the box and the box

Margin-top

Margin-right

Margin-bottom

Margin-left

The ligatures of margin and the rules of padding are the same

2 Vertical Merging phenomenon

Two vertically distributed boxes with a relative margin set, the final two distance depending on the maximum value of two margin

(can only be avoided, not resolved)

3 include merge phenomena

When setting Margin-top for a sub-box, it is possible to take the parent box with you-including the merging phenomenon

Workaround:

1 Add a border to the parent box

2 set a property for the parent box: Overflow:hidden;

CSS Basics 3