<img SRC ="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>Copy the code

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio> 
Copy the code

Background-color :red; background-color:red

#content{background-color:red} #content{background-color:red} #content{background-color:red} #content{background-color:red} #content{background-color:red}

3) Third bit: number of all class selectors, property selectors, pseudo class selectors (e.g..class, [], :class)

4) Bit 4: number of all element selectors, pseudo element selectors (e.g. : div, ::after)

3. Compare source order

Code written late wins (personal use)

inheritance

Most font and text content properties in CSS are inherited from parent elements to child elements

So: to set the font for an HTML page, select body, and then set the font information in the body

The property is worth the calculation process

1) Determine the declared value

No conflicting declarations, directly as CSS properties

2) Cascading conflicts

For conflicting declarations of stylesheets, use cascading rules to determine CSS property values

3) Use inheritance

If there is still no value, use inheritance for values that can be inherited, inheriting the value of the parent element

4) Use the default value if no value exists, use the default value

Two special CSS values

The value of the parent element :inherit (e.g. Color :inherit)

Initial value :initial (e.g. color:initial)

Row boxes and block boxes

1) Row box: disaplay:inline

2. Block boxes: display: block

3) Inline block: display:inline-block

A box model of a row box

Distinctive features

1) The box extends along the content

2) The width and height of row boxes cannot be set

3) The padding is effective in the horizontal direction, while the vertical direction only affects the background and does not actually occupy space

4) The border is effective in the horizontal direction, while the vertical direction does not actually occupy space

5) Padding is effective in horizontal direction, vertical direction does not actually occupy space

Box model of inline blocks

1) Don’t monopolize a row

2) All sizes in the box model are valid

Normal flow layout

Also known as: Regular flow, document flow, regular document flow, regular document flow

The combination of top and bottom distances

Two regular flow block boxes with adjacent upper and lower margins are merged

For details, please see: (zhuanlan.zhihu.com/p/25321647, landing the principle)

Float (Float: High compatibility) (Flex can replace most of float’s features)

arrangement

1) Left: float left, element up and left

2) Right: float right, element up and right

3) Default: None

4) Floating boxes will avoid regular flow boxes when they are arranged in inclusion speed

5) The conventional flow box is in the arrangement, ignoring the floating box

6. Margin merging does not occur

The basic characteristics of

1) When an element floats, it must be a block box

2) Floating elements contain fast, box regular streams like the content for the parent element

The box size

1) If the width is auto, it means to adapt the content width

2) The height is auto, which is consistent with the normal flow and ADAPTS to the content height

3) If margin is auto, 0

4) Row boxes will avoid floating boxes when they are arranged

5) If the text is not in the line box, the browser automatically generates a line box to wrap the text (the line is called anonymous line box).

The height of collapse

1) The root cause of height collapse: when calculating the automatic height of conventional flow boxes, floating will not be considered

2) Clear floating: CSS property: Clear

– Default: None

-left: Clears the left float. This element must appear below all previous left float boxes

– right: Clears the right float. This element must appear below all previous right float boxes

-both: Clears the right float. This element must appear below all previous float boxes

3) No clear float is used to solve the problem of height collapse:

Add the property overflow: Hidden to the floating parent element;