CSS

1. Box model

When page rendering, dom elements used in the layout model . Can box-sizingbe set via . According to the calculation of the width and height of the area can be divided into:

• content-box (W3C standard box model)
• border-box (IE box model)
• padding-box (FireFox used to support)
• margin-box (Not implemented by the browser)

Tips: In theory there are four kinds of boxes above, but now with the mdn w3c specification are only supported content-boxwith border-box;

2. BFC

The block-level formatting context is an independent rendering area, which isolates the elements inside the BFC from the external elements, so that the positioning of the internal and external elements will not affect each other.

Layout under IE, can be triggered by zoom:1

• Triggering conditions:

  • Root element
  • position: absolute/fixed
  • display: inline-block / table
  • float element
  • ovevflow !== visible

• rule:

  • Two adjacent boxes belonging to the same BFC are arranged vertically
  • The margins of two adjacent boxes belonging to the same BFC will overlap
  • The left side of the margin box of the child element in the BFC is in contact with the left side of the containing block (BFC) border box (except for the child element absolute)
  • The area of ​​the BFC does not overlap with the area of ​​the float element
  • When calculating the height of BFC, floating sub-elements also participate in the calculation
  • The text layer will not be covered by the floating layer and surround it

• application:

  • Prevent marginoverlap
  • Can contain floating elements-clear internal floats (the principle of clearing floats is that both divare located in the same BFC area)
  • Adaptive two-column layout
  • Can prevent elements from being covered by floating elements

3. Cascading context

The element is promoted to a special layer, which is higher than ordinary elements in the three-dimensional space (z axis) .

• Triggering conditions

  • Root cascading context ( html)
  • position
  • css3 attributes
    • flex
    • transform
    • opacity
    • filter
    • will-change
    • -webkit-overflow-scrolling

• Stacking level: the ordering of stacking context on the z-axis

  • In the same stacking context, the stacking level is meaningful
  • z-indexHas the highest priority

4. Centered layout

• Center horizontally

  • Inline elements: text-align: center
  • Block-level elements: margin: 0 auto
  • absolute + transform
  • flex + justify-content: center

• Vertically centered

  • line-height: height
  • absolute + transform
  • flex + align-items: center
  • table

• Center horizontally and vertically

  • absolute + transform
  • flex + justify-content + align-items

5. Selector priority

• !important> Inline style> #id> .class> tag> *> inherited> Default
• The selector from right to left to resolve

6. Remove the influence of floating and prevent the height of the parent from collapsing

• Clear floats by adding tail elements
  • :after / <br> : clear: both
• Create parent BFC
• Parent setting height

7. The difference between link and @import

• linkMore functions, you can define RSS, define Rel and other functions, but @importcan only be used to load css
• When parsed link, the page will load the referenced css synchronously, and @importthe referenced css will not be loaded until the page is loaded
• @importRequires IE5 or above to use
• linkCan be dynamically imported using js, @importno

8. CSS preprocessor (Sass/Less/Postcss)

The principle of the CSS preprocessor: It converts the CSS-like language into real CSS readable by the browser through Webpack compilation . On top of this layer of compilation, CSS can be given more and more powerful functions, commonly used functions:

• Nested
• variable
• loop statement
• Conditional statements
• Auto prefix
• Unit conversion
• mixin reuse

Generally, this point will not be emphasized in the interview, and you can generally introduce your own experience in actual combat projects~

9.CSS animation

• transition: Transition animation

  • transition-property: Attributes
  • transition-duration: Interval
  • transition-timing-function: Curve
  • transition-delay: Delay
  • Common hooks: transitionend

• animation / keyframes

  • animation-name: Animation name, corresponding@keyframes
  • animation-duration: Interval
  • animation-timing-function: Curve
  • animation-delay: Delay
  • animation-iteration-count: Times
    • infinite: Loop animation
  • animation-direction: Direction
    • alternate: Reverse playback
  • animation-fill-mode: Still mode
    • forwards: When stopped, keep the last frame
    • backwards: When stopped, return to the first frame
    • both: Simultaneous use forwards / backwards
  • Common hooks: animationend

• Animation attributes: try to use animation attributes for animation to have better performance

  • translate
  • scale
  • rotate
  • skew
  • opacity
  • color

Experience

Usually, CSS is not a key area of ​​investigation, but this is actually caused by the lack of focus on CSS in the domestic industry. There are not many teams and talents who are really proficient and dedicated to CSS. Therefore, if you can have your own insights and experience in the CSS field, it will be quite a plus and stand out.