HTML5 fifth day notes

CSS properties

Paragraph properties

letter-spacing:10px; The distance between words

word-spacing:1px; The distance between words (Mostly used on English websites)

text-transform:capitalize (capitalize the first letter of each word) uppercase (all uppercase) lowercase (all lowercase) (Mostly used on English websites)

white-space :normal/nowrap (no line breaks)

Box model

All tags are regarded as a box;

Treat block-level elements as a large box, and The element is regarded as a small box

What parts does the embodiment of a box model consist of?

width+height (width and height of content)+padding (inner margin/inner padding)+border (border)+margin (outer margin)

border: (border)

border-top:

border-bottom:

border-left:

border-right:

border-bottom:（下注Border)

border-bottom-style: solid (solid line) dashed (dashed line) dotted (dash line) double (double solid line) border line style

border-bottom-color :red/#fff;The color of the border

border-bottom-width:3px;The thickness of the border

border:3px solid red;

border:none/0;

border-top:none/0;

border-collapse:collapse (remove duplicate edges)

padding: (inner margin, inner padding, inner padding) content The distance to the border is relative

padding-top:

padding-left:

padding-right:

padding-bottom:

(padding will affect the width and height of the box)

padding:10px (up, down, left and right)

padding:10px 20px;(up, down, left and right)

padding:10px 20px 30px ; (Top right, bottom) left = right "Follow the clockwise principle"

padding: 10px 20px 30px 40px; (top right, bottom left)

padding: 0 0 5px 0; (only Can be written like this)

margin: (margin, padding) The distance between labels
relative

The upper and lower margins of inline elements cannot be implemented

blocks The upper and lower margins of level elements cannot be accumulated, and can only take the maximum value

The left and right margins of both inline and block-level elements are cumulative values

The margins will not affect the width and height of the box

margin:10px (top, bottom, left, and right)

margin:10px 20px; (top, bottom, left, and right)

margin:10px 20px 30px; (top, right, bottom) left = right "Follow clockwise Principles》

margin:10px 20px 30px 40px;(top right, bottom left)

margin: 0 0 5px 0;(can only be written like this)

A box Actual size:

Width: width of the content (width) + border (left and right) + padding ((left and right) + margin (left and right)

Height: height of the content (height) + border ( Top and bottom) + padding (top and bottom) + margin (top and bottom)

Application of margins: Center the box in the browser, in the centering method of the parent element

margin:0 auto;

New attributes of CSS3

box-sizing:border-box/content-box Ignore the values ​​of border and padding

The above is the content of the notes on the fifth day of HTML5, more For related content, please pay attention to the PHP Chinese website (www.php.cn)!