Useful blog

About CSS Layout

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

Function: Set some properties for the parent element, and the child element can also be used, which we call inheritance

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

    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

    1. Indirect selection refers to inheritance

    If it is an indirect selection, then whoever is closer to the target label will listen to them

    1. 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

    1. 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.

    Exit mobile version