On the 8th day of my participation in the November Gwen Challenge, check out the details of the event: the last Gwen Challenge 2021

1. vw.vh.vmin.vmax

  • vwIt’s viewport width1/100
  • vhIt’s viewport level1/100
  • vminThe side with a wide viewport and a small high school1/100On (ie 9 to callvm)
  • vmaxIt’s the one with the wider viewport and the larger viewport1/100(IE support)
/* Use em and vw to define base fonts. The advantage is that no media queries are required */ 
:root{
    font-size: calc(0.5 em + 1vw)}/* Media query definition size */
@media(min-width: 800px) {:root{
        font-size:.875em}}@media(min-width: 1200px) {:root{
        font-size: 1em}}Copy the code

2. line-heightCalculation without units

/* Calculate the line height based on the size 2 * 16px (base size) * 1.2 = 38.4px*/
p {
    font-size : 2em
    line-height: 1.2/ *38.4 px.*/
}
Copy the code

3. Use the global border-box

*,
::before:,
::after{
    box-sizing: border-box
}
/* Box-sizing will affect third party components, but if we use :root, it is a good choice */
:root{
    box-sizing: border-box;
}
*,
::before:,
::after{
    box-sizing: inherit;
}

.third-party-component {
    box-sizing: content-box /* So that the three components can be restored to the original box model */}Copy the code

4. Whyvertical-alignDon’t take effect?

Vertical-align only works on inline elements or table-cell elements.

5. Several ways of vertical centralization

  • Center the contents of the container with equal upper and lower margins
  • Use with containersdisplay:table-cellandvertical-align:middle
  • Use the flex – box
  • Only one line of text is used for container contentline-heightLet’s make it equal to the height of the container
  • The height of the container and content is known to use absolute positioningtop:50%andmargin-top: -10px-10px is half the height of the content
  • Do not know the content height can be usedtransform: -50%

6. Owl selector* + *

The selector selects any element directly following the other element that is not the first child of the same parent of the page.

7. Original intention of floats: Floats pull strict elements to the side of their container so that document flow surrounds them.

.clearfix::after{
    display:block;
    content:' ';
    clear: both
}
/* Clear float */
Copy the code