Unique Div CSS Reading Notes (1)_html/css_WEB-ITnose

Inherit

Border, margin, padding, and background cannot be inherited.

Td in table will not inherit the attributes of body, so it needs to be specified separately.

Weight

p {color:black;} /*The weight is: 1*/

p em {color:yellow;} /* The weight is: 2*/

p .note em .dark{color:gray;} /*The weight is: 22*/

#main{color: black;} /*The weight is ：100*/

p{color:red !important;} /*The weight is: 1000*/

Inline style sheet (written in the tag)> Embedded style sheet (written in the head of the document) > External style sheet (written in an external file).

Element classification

Block-level elements (display: block): title h, paragraph p, table, layer div, body

Inline elements: (display: inline ):a, em, span

List item: (display:list-item):li

Hidden element: (display:none)

Box model

Each HTM element can be regarded as a box filled with things. The distance between the content inside the box and the border of the box is called "padding". The box itself has a border, and the box border and other Between the boxes, there is also "margin"

The actual width of an element is = left border, left border, left padding, content width, right padding, right border, right border

Notes:

1. The margin value can be negative, and each browser supports different values.

2. The default border style is not displayed (border-style:none).

3, the padding value cannot be negative.

4. For block-level elements, the upper and lower boundaries of unfloated vertically adjacent elements will be compressed. For example: there are two elements above and below, the lower boundary of the upper element is 10px, and the upper interface of the lower element is 5px, then the actual distance between the two elements is 10px (the maximum value of the two boundary values ​​is taken). As shown in the figure: 1

5, the boundaries of floating elements (whether floating left or right) will not be compressed. As shown in the figure: 2

6, inline elements, such as a, define the upper and lower boundaries and will not affect the line height.

7. If there is no content in the box, even if the width and height are defined, it actually only accounts for 0%.

Picture: 1

Picture: 2