CSS Learning (iii)

1 Rows High

Browser Default Text Size

Browser default text size: 16px

Line height: is the distance between the baseline and the baseline

Line height = text height + Top bottom margin

The vertical center is displayed when a line of lines of text is high and the parent element is the same height.

Unit of row height

Summary: Units in addition to pixels, the row height is the product of the size of the text.

Summary: With no units, the row height is multiplied by the child element literal size, and the line height of EM and% is multiplied by the parent element text size. The row height, in pixels, is the defined row height value.

Recommended row height uses pixels.

Box model

Border border

Border-top-style:solid Solid Line

Dotted dot Line

Dashed dashed line

Border-top-color Border Color

Border-top-width Border thickness

Ligatures of border properties

Features: No order required, line type is required to write.

Border Merge Border-collapse:collapse;

Get focus

The label for ID gets the cursor focus

Inner margin

Padding-left |  Right |  Top | Bottom

Padding ligatures

padding:20px; Upper right lower left inner margin is 20px

padding:20px 30px; Up or down 20px 30px

padding:20px 30px 40px; The padding on the top margin is around 20px and the inner margin is 40 under 30px.

padding:20px 30px 40px 50px; 20px right 30px Lower 40px left 50px

the problem with the inner margin supporting the big box

Factors affecting the width of the box

The inner margin affects the width of the box

The border affects the width of the box

width of box = defined width + Border Width + left and right inner margin

Inherited boxes don't usually get big.

Contains (nested) box, if the child box does not define the width, the sub-box set the left and right padding, generally do not support large box.

Outer margin

Margin-left |  Right |  Top | Bottom

Outer margin ligatures

margin:20px; Upper and lower left and right margin 20PX

margin:20px 30px; Up or down 20px 30px

margin:20px 30px 40px; 20px approx. 30px 40px

margin:20px 30px 40px 50px; 20px right 30px Lower 40px left 50px

Vertical margin Merge

Two boxes vertical one sets the top margin, one sets the bottom margin, and takes the larger value of the setting.

Nesting of box margins collapse

WORKAROUND: 1 Set the border for the parent box

2 to the Father box Overflow:hidden; BFC Formatting context

Http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

CSS Learning (iii)