The priority of the selector:

  • ! important
  • Inline style, weight 1000
  • Id selector, weight 100
  • Class selector, pseudo-class selector (Li: last-Child), attribute selector, weight 10
  • Tag selector, pseudo-element selector (Li :after), weight 1
  • Child selectors, sibling selectors, descendant selectors, wildcard selectors, weight 0

Display, visibility and opacity

  • Display: None: The render tree does not contain the render object, so the element does not occupy a position in the page and does not respond to bound listening events.
  • Visibility: Hidden: The element will still take up space in the page, but will not respond to bound listening events.
  • Opacity of elements is set to 0, allowing elements to be hidden. The element still takes up space on the page and can respond to listening events for the element binding.

Transitions and Animations

  • Transitions can only be implemented by specifying the start and end values of the property and smoothing the Transitions between them, so more complex animations aren’t possible;
  • The Animations feature allows you to achieve complex Animations by defining multiple keyframes and the attribute values of the elements in each keyframe.

Standard box model and weird box model

  • Box-sizeing: Content-box represents the standard box model (default)
  • Box-sizeing :border-box indicates IE box model (also known as weird box model)

@import

Reduce the use of @import in favor of link because the latter is loaded with the page and the former is loaded after the page has finished loading.

1px pixel problem

Device pixel ratio = physical pixel/logical pixel. The physical pixel is 10801920 and the logical pixel is 7501280. The pixel written in the CSS is the logical pixel DPR, which stands for device Pixel Ratio

Mobile 1px pixel problem and solution: Because the pixel values written in CSS are logical pixel values, a logical pixel value may contain 2 or 3 physical pixels.

Solutions:

  1. Media enquiries,-webkit-min-device-pixel-ratioSet the device pixel ratio to 0.5px for 2 and 0.33px for 3
  2. The transform: scaleY (0.33333);transform

Pixel unit

Px, REM, EM, VW, VH, vmin, vmax

  • Vmin: Smaller value in VW and VH
  • Vmax: Larger value in VW and VH

Horizontal and vertical center

1. Use Flex layout

.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}
Copy the code

2,

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;     /* Half of its height */
    margin-left: -50px;    /* Half of its width */
}
Copy the code

3,

.parent {
    position: relative;
}
 
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
Copy the code

The way to clear the float

  • Add the pseudo-element after the last element, clear:both
  • The parent element, overflow:hidden or overflow: Auto, forms a BFC region

BFC block formatting is context-independent of the layout environment and does not affect the layout outside the container

Conditions for creating a BFC

  • The root element: body
  • Element sets float: float a value other than None
  • Overflow values are values other than visible, such as hidden, auto, scroll
  • Element set absolute position: position (Absolute, fixed)
  • Display: Inline-block, table-cell, table-caption, flex, etc
  • Display: The table also thinks that it can generate BFC. In fact, the main reason is that the table generates an anonymous table-cell by default. It is this anonymous table-cell that generates BFC

BFC can solve the problem of margin overlap

Pseudo classes and pseudo elements

  • The single colon (:) is used for CSS3 pseudo-classes;
  • The double colon (::) is used for CSS3 pseudo-elements.

Flex layout

  • The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto
  • When setting the width of flex-item, use flex-basis instead of width; flex-basis is preferred.
  • Flex-grow specifies the size of the item when there is free space. The default is 0, that is, if there is free space, the item is not enlarged.
  • Flex-shrink specifies the size of an item when space is insufficient. The default is 1, that is, if space is insufficient, the item will shrink.
  • The Flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

Flex calculation

Residual space calculation method

  • Remaining space: x
  • Suppose you have three Flex item elements with flex-grow values a, B, and C
  • The surplus space of each element can be allocated as follows: a/(a + b + c) * x, b/(a + b + c) * x, c/(a + b + c) * x
  • Calculate the width of each element: width + the amount of space each element can allocate

Overflow space calculation method

  • Width of three Flex item elements: w1, w2, w3
  • Flex -shrink for three Flex item elements: a, B, c
  • Calculate the total compression weight:
  • sum = a * w1 + b * w2 + c * w3
  • Calculate the compression ratio of each element:
  • S1 = a * w1 / sum, S2 =b * w2 / sum, S3 = C * w3 / sum
  • Calculate the width of each element: width – compression ratio * overflow space

Flexbox attribute abbreviation trap

  • When not writing flex, it is equivalent to flex: initial; The default value
  • flex: initial; === flex: 0 1 auto;
  • flex: none; === flex: 0 0 auto;
  • flex: auto; === flex: 1 1 auto;
  • flex: number; === flex: number 1 0%; (such as flex: 1; === flex: 0;
  • flex: 2 1 0; === flex: 2 1 0px;
  • flex: 100px; === flex: 1 1 100px;
  • flex: 0px; === flex: 1 1 0px;
  • flex: 0%; === flex: 1 1 0%;
  • flex: 0; === flex: 0 1 0%;
  • flex: 100px 0; === flex: 0 1 100px;
  • flex: 100px 2 1; === flex: 2 1 100px;
  • flex: 200 1 2; Invalid value. Flex-basic values must have px units in addition to 0. Flex :200 1 2px

Points to note:

  1. A flex-Basic value of auto means that the width value is automatically calculated and is the width of the content itself.
  2. Auto only if flex is not written, or if flex is initial, None, or auto, or if flex-basic is specified manually: auto; /felx: 1 1 auto case in effect.
  3. If only flex-grow or felx-shrink is set in the Flex abbreviation, the flex-basic value will change to 0%;

reference

  • Flex Layout Tutorial: Syntax section
  • Understand flex-grow, flex-shrink, and flex-basis in depth
  • Flexbox layout for correct use of posture