9.5th Novice CSS Novice Course Learning Summary

Learning summary
html 5

Attributes under the vido tag and audio tag: controls playback controls loop playback autoplay automatic playback

CSS

The difference between block-level elements and inline elements
1. Block-level elements: block element
Each block-level element occupies one row of height by default. After adding a block-level element to a row, other elements cannot be added (except after float). When two block-level elements are edited continuously, they will automatically wrap and display on the page. Block-level elements can generally nest block-level elements or inline elements;
Block-level elements generally appear as containers to organize structures, but this is not always the case. Some block-level elements, such as

, can only contain block-level elements. Other block-level elements can contain line-level elements such as

. Others can contain both block-level and line-level elements.
DIV is the most commonly used block-level element, and the display:block element style is all block-level elements. They are always expressed in the form of a block, and are arranged vertically in sequence with the sibling blocks of the same level, filling up the left and right sides.

2. Inline element: inline element
Also called inline element, inline element, etc.; inline elements are generally basic elements based on semantic level (semantic) and can only accommodate text or other inline elements. Common inline elements "a". For example, SPAN elements, IFRAME elements and element style display: inline are all inline elements. For example, elements such as text are arranged horizontally between letters and automatically wrap to the right end.

3. Characteristics of the block element
①. Always starts on a new line;
②. Height, line height, margins and padding can all be controlled;
③. The default width is its container 100% unless a width is set.
④. It can accommodate inline elements and other block elements

4. Characteristics of inline elements
①, and other elements are on the same line;
②, height, line height, outer margins and inner margins cannot be changed;
③. The width is the width of its text or picture and cannot be changed. ④. Inline elements can only accommodate text or other inline elements.
For inline elements, please note the following.
Setting the width width is invalid.
Setting the height height is invalid and can be set through line-height.
Set margin. Only left and right margins are valid, upper and lower margins are invalid.
Set padding. Only left and right padding is valid, not up and down. Note that the scope of the element is increased, but the content around the element is not affected.

The priority of CSS style introduction method

Inline priority is the highest. Other introduction methods depend on the specific location. Whichever is parsed first will take priority

CSS Selector

ID selector

CLASS selector

Element selector
Descendant selector
Child selector
Adjacent sibling selector
Wildcard selector

Currently, the reset technology in the novice stage is implemented through the wildcard character *{}

In the future, normalize may be basically used to replace the reset technology