CSS global property values inherit, Initial, unset, revert Compare

Inherit means inherit.

Initial Indicates the initial CSS value.

Unset indicates an unfixed value. If the property is a default inherited property, the value is equivalent to inherit. If the property is non-inherited, the value is equivalent to Initial.

The Revert keyword allows you to revert the current element’s style back to the browser’s built-in default style, rather than the original CSS property values.

// For example, if you want a button to use the browser's default UI, you can set it like this:
button {
    all: revert;
}
Copy the code

Image adaptation

display: block;
height: atuo;
max-width: 100%;
Copy the code

BEM(Lower CSS selector weights to improve efficiency and experience across CSS coding)

The pattern of naming conventions is as follows:

Block {} represents a higher level of abstraction or component. Block__element {} represents. Block's descendant. Block -- Modifier {} represents different states or versions of. BlockCopy the code

OOCSS(improve performance by creating reusable CSS modules)

Object-oriented CSS has two principles:

  • Independent structure and style, reusability of the base object by extending the class name to the base object
  • Separate container and content, with the advantage that content can be inserted into any container

margin

Margin overlap: - Horizontal margins never overlap - vertical margins may overlap between specific boxes Margin percentage: calculated by the width of the parent elementCopy the code

pointer-events

The only values available to the browser are Auto and None

Auto -- The effect is the same as if the pointer-events attribute was not defined, and the mouse does not penetrate the current layer. None -- The element will never be the target of mouse events. Mouse events can point to descendant elements when their pointer-events attribute specifies other valuesCopy the code

border-radius

border-radius: length|% length|% length|% length|% / 1-4 length|%;
Copy the code

The four values before the slash indicate the horizontal radius of the fillet, and the four values after the slash indicate the vertical radius of the fillet

content

content: "Ordinary string"; Content: attr(HTML attribute name of the parent element); Content: URL (url of images, audio files, and videos)./* Uses a Unicode character set, using 4-bit hexadecimal encoding, but displays differently in different browsers and is less recognizable on mobile */
content: "\21e0";
/* Multiple values of the content can be combined arbitrarily, with parts separated by Spaces */
content: "'" attr(title) "'";
/* Auto-increment counter for inserting digits/letters/Roman numeral numbers */
content: counter(<identifier>, <list-style-type>);
/* Use the qutoes of the parent element as the content value */
content: open-quote | close-quote | no-open-quote | no-close-quote;
Copy the code

display,opacity,visibility

Display: None — No position taken after hiding, no inheritance of quilt elements, no parent elements, and no child elements displayed

Visibility :hidden– The position taken after hiding will be inherited by the quilt element, and the child element will be visible by setting the child element visibility:visible

Opacity :0– The position occupied after it is hidden is inherited by the opacity element, but cannot be re-displayed by setting its child opacity:0

other

Position Absolute: After setting border sizing, including padding, but not including border em: If the font size is not set by the parent element, it is calculated as the font-size*em padding percentage: the width of the parent elementCopy the code