When I first started working on H5 related development work, the biggest headache for me was the page layout of H5. Often, even the position of a control can waste half a day. However, it is also because I did not systematically study the layout methods of CSS. After learning about its layout recently, I feel that starting a page is much easier. Here is a brief summary, hoping to be helpful to beginners.
The Three Characteristics of CSS
- Inheritance:
Function: Set some properties for the parent element, and the child element can also be used, which we call inheritance
- Attention points:
Not all attributes can be inherited, only attributes starting with color/font -/text -/line – can be inherited
In CSS inheritance, not only sons can inherit, but also descendants can inherit
- Special characteristics in inheritance
The text color and underline of label 3.1a cannot be inherited
The text size of the 3.2h tag cannot be inherited
Application scenario:
It is generally used to set common information on web pages, such as text color, font, text size, etc
Stackability:
Function: Stackability is the ability of CSS to handle conflicts
Attention points:
Stackability only occurs when multiple selectors select “the same label” and then set “the same property”
Priority:
Function: When multiple selectors select the same label and set the same properties for the same label, the stacking is determined by priority
Three ways of judgment
- Indirect selection refers to inheritance
If it is an indirect selection, then whoever is closer to the target label will listen to them
- Same selector (select directly)
If they are all directly selected and all of the same type of selectors, then whoever writes after them will listen to them
- Different selectors (directly selected)
If all selectors are directly selected and not of the same type, they will be stacked according to the priority of the selectors
ID>Class>Tags>Wildcards>Inheritance>Browser Default
! Important is used to increase the priority of a property in a selector that directly selects a label. It can increase the priority of the specified property to the highest.