1. CSS box model

The CSS box model is essentially a box that encapsulates the surrounding HTML elements: margins, borders, inner margins, and actual content.

  • Standard box model: The range includes margin, border, padding, and content, and width and height refer to the width and height of the content. Increase the inner and outer margins. Borders do not affect the size of the content area, but increase the overall size of the element box.

  • IE box model: The range includes margin, border, padding, and content, but width and height refer to content+ padding+ border width and height

  • Properties: box – sizing: context – box (by default, the standard box) | border – box (box), IE | inherit;

  • The display – clip: (background color cover) border – box (default) | context – box;

2. Selector priority

  • Inline style 1000
  • Id selector 100
  • Class selector 10
  • Tag selection goes to 1
  • Wildcard selector 0

3. Pseudo-elements and pseudo-class elements

The fundamental difference between pseudo-classes and pseudo-elements is whether they create new elements.

  • Pseudo-classes: Essentially to compensate for regular CSS selectors by adding special effects to certain selectors; Pseudo classes::hover.:active.first-child.nth-child(n), etc.
  • Pseudo-element: essentially creates a virtual container with content that does not exist in the DOM document and is a virtual element; Such as:: : after.beforeEtc.

4. The display properties

  • display: none;Make the tag disappear and the element will not be displayed
  • Display: inline(default);Inline elements. Elements are displayed as inline elements without newlines around them.
  • display: block;Block-level elements, the elements are displayed as block-level elements, preceded by newlines
  • display: inline-block;Inline block elements, both inline and block.
  • display: inherit;— Specifies that the display attribute value should be inherited from the parent element.
  • display: flex;— Flexible layout

5. Animation properties of CSS

attribute meaning
Animation Used to set animation properties, passed@keyframesTo define the animation, available throughfrom.. to..orThe percentageTo set the intermediate transition state
Transition Used to set style transitions for elements. There are only two states that need to be triggered by conditions and cannot be repeated unless triggered again. Trigger conditions such as::hoever,:focus,jsEtc.
Transform It is used to rotate, scale, move, or tilt an element, and has nothing to do with the animation that sets the style, just as color is used to set the “appearance” of an element.
Translate (move) Translate is just an attribute value of transform, that is, move.

5. Position Position attribute

value describe
static The default value. Element appears in normal stream without location (ignore top, bottom, left, right or Z-index declaration)
relative Do not leave the document flow, occupy the original position, relative to its normal position
absolute Out of the document flow, positioned relative to the first non-static positioned parent element
fixed Absolute positioning, relative to the browser window
inherit Inherits the position attribute from the parent element
sticky It is relative within the screen range and fixed beyond it

Opacity, visibility and opacity are also different

attribute Space occupied Child inheritance event Transition animations
opacity:none Don’t take No quilt element is inherited, but the parent element is not present and the child element is not displayed Element does not exist on the page and cannot be event bound Can’t
visibility:hidden occupy If the quilt element inherits, you can set visibility:visible to make the child elements visible Unable to trigger Can’t
opacity:0 occupy The function inherits opacity elements, but cannot set opacity to display Events bound to any opacity:0 element can trigger (CSS binding) can

7. Animation properties of CSS

attribute meaning
Animation Used to set animation properties, passed@keyframesTo define the animation, available throughfrom.. to..orThe percentageTo set the intermediate transition state
Transition Used to set style transitions for elements. There are only two states that need to be triggered by conditions and cannot be repeated unless triggered again. Trigger conditions such as::hoever,:focus,jsEtc.
Transform It is used to rotate, scale, move, or tilt an element, and has nothing to do with the animation that sets the style, just as color is used to set the “appearance” of an element.
Translate (move) Translate is just an attribute value of transform, that is, move.

Transition parameter CSS animation

8. The difference between link and @import when importing page styles

  • Load order
    • linkThe CSS introduced by the tag is loaded simultaneously
    • @importThe imported CSS styles are loaded after the page is loaded
  • The weight
    • linkThe imported style weight is greater than@importIntroduced styles
  • compatibility
    • linkTags apply to HTML elements, no compatibility issues
    • @importIntroduced in CSS2.1, not supported by older browsers
  • DOM manipulation
    • linkSupport for using Javascript to control the DOM to change styles; while@importDoes not support