Organize common css interview questions

##Box Model

Standard Box Model ：content
• Weird box model: border content

Special recommendation：Summary of CSS interview questions in 2020 (Latest)

Inline elements

Features
• Setting width and height is invalid
  • Setting margin is only valid for left and right, top and bottom Invalid
  • The setting of padding is valid for up, down, left and right, and will hold up the space
  • Will not automatically wrap lines
Common inline elements
• a span b i strong

Inline block element

Features
• You can set the width and height
  • with All inline elements appear on the same line
Common inline block elements
• img input button select

block Level elements

Features
• You can set the width and height
  • All block-level elements will occupy one row
  • If the width and height are not set, they will inherit from the parent by default Level width and height
Common block-level elements
• p p ul li h1-h6

css to achieve centering

margin: 0 auto;
• position positioning matches transform:translate
• flex layout
• text-align matches line-height, used The font is centered within the area of ​​its parent element
• vertical-align: middle; Used to set the centering of inline elements

css hack

Explanation: For different browsers, write different css for compatibility
• condition hack

  • <!--[if IE]>
    <style>
      p {
          color: red;
      }</style>
    <![endif]-->

  attribute hack

  • .p {
        color: red; /*IE 8+*/
        *color: green; /*IE 7*/
        _color: yellow; /*IE 6*/}

  Selector hack

  • /*IE 6*/* html .p {
        color: red;}/*IE 7*/* + html .p {
        color: green;}

px and em

px are absolute units and the value is fixed
• em is inherited from the parent The font-size size unit of the element

support

@support is used to detect whether the browser supports a certain css attribute. It can be understood as a conditional judgment and is generally used for compatibility processing.

media

Media query, based on the css style corresponding to the viewport case, generally works with rem for mobile compatibility.

calc

css calculation attribute, used to dynamically calculate length values ​​and supports mathematical operations.

Clear float

Pseudo element clear float
• Principle: Set clear:both in the pseudo element of the parent element to solve the problem of height collapse.

  • ::after {
      content: "";
      clear: both;
      overflow: hidden;
      height: 0;}

BFC: It is an independent layout environment

The formatting context is an independent rendering area, allowing elements inside the BFC Isolated from external elements so that the positioning of internal and external elements will not affect each other.
• Rules
• Under the same BFC, two adjacent boxes are arranged vertically by default
  • Under the same BFC, the margins of two adjacent boxes above and below will overlap.
  • BFC will not overlap with the float area
  • When calculating the BFC height, floating sub-elements will also participate in the calculation, so if the BFC height is not set, it will also be stretched by the floating sub-elements.
  • The text layer will not be covered by the floating layer, but surrounded by it

To solve the problem of overlapping parent and child edges, the child element margin moves with the parent element

Principle: Use pseudo elements to add a table with a height of 0 to the parent element

Box model

• Standard box model: content
• Weird box model: border content

Inline elements

• Features
  • Setting width and height is invalid
  • Setting margin is only valid for left and right, not top and bottom
  • Setting padding is valid for both top, bottom, left and right, and will support the space
  • will not automatically wrap
• common inline elements
  • a span b i strong

Inline block elements

• Features
  • You can set the width and height
  • Display on the same line as all inline elements
• Common inline block elements
  • img input button select

Block-level elements

• Features
  • You can set the width and height
  • All block-level elements will occupy an exclusive line
  • If the width and height are not set, the width and height of the parent will be inherited by default
• Common block-level elements
  • p p ul li h1-h6

css centering

• margin: 0 auto;
• position positioning with transform:translate
• flex layout
• text-align with line-height, used for fonts within its parent element area Center
• vertical-align: middle; Used to set the centering of inline elements

css hack

• Explanation: For different browsers, write Different css, used as compatible
  • Condition hack

  <!--[if IE]>
  <style>
    p {
        color: red;
    }</style>
  <![endif]-->

  • Attribute hack

  .p {
      color: red; /*IE 8+*/
      *color: green; /*IE 7*/
      _color: yellow; /*IE 6*/}

  • Selector hack

  /*IE 6*/* html .p {
      color: red;}/*IE 7*/* + html .p {
      color: green;}

px and em

• px is an absolute unit, the value is fixed
• em is the font-size size unit inherited from the parent element

support

@support is used to detect whether the browser supports a certain css attribute. It can be understood as a conditional judgment and is generally used for compatibility processing.

media

Media query, based on the css style corresponding to the viewport case, generally works with rem for mobile compatibility.

calc

css calculation attribute, used to dynamically calculate length values ​​and supports mathematical operations.

Clear float

• Pseudo element clear float
  • Principle: Set clear:both in the pseudo element of the parent element to solve the problem of height collapse.

  ::after {
    content: "";
    clear: both;
    overflow: hidden;
    height: 0;}

BFC: It is an independent layout environment

• The formatting context is an independent rendering area, allowing elements inside the BFC Isolated from external elements so that the positioning of internal and external elements will not affect each other.
• Rules
  • Under the same BFC, two adjacent boxes are arranged vertically by default
  • Under the same BFC, the margins of two adjacent boxes above and below will overlap.
  • BFC will not overlap with the float area
  • When calculating the BFC height, floating sub-elements will also participate in the calculation, so if the BFC height is not set, it will also be stretched by the floating sub-elements.
  • The text layer will not be covered by the floating layer, but will surround it

To solve the problem of overlapping parent and child edges, the margin of the child element moves with the parent element

Principle: Use pseudo elements to add a table with a height of 0 to the parent element

Recommended related tutorials: CSS video tutorial

The above is the detailed content of Organize common css interview questions. For more information, please follow other related articles on the PHP Chinese website!