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

CSS you don’t know aboutflex

  • If your page has a horizontal multi-column layout, use grid or float instead of Flex.
  • If you have a vertical Flex layout, don’t worry;

Reason: Taking the three-column layout as an example, the page will first load 1 and 2 of the first two columns (Figure 1). At this point, the page is drawn, but 3 has not been loaded. This will recalculate the position of 1 and 2, leaving layout space for 3, which will trigger page backflow. Causes the page to render twice.

CSS you don’t know about@supports

  • There are a lot of new specifications for CSS as browsers get updated, and most of the new specifications don’t apply to older browsers. then@supportsIs a good choice to know whether it is supported or not through this API. However,@supportsConsider browser compatibility itself.
/* Common usage: */
@supports not (display:flex)  or (xx) and (xx){}

Copy the code

CSS you don’t know aboutinheritandinitial

  • This can be used when we want to inherit instead of a cascading valueinherit, and only certain attributes will be inherited, including text, list, and table border attributes.
  • Sometimes, when we want to undo an element style, we need to useinitial

You don’t know how CSS workspadding/margin

  • Sometimes we’ll see an assignment like this
padding: 10px 8px 12px;
Copy the code

10px is up, 8px is right, 12px is down, so what’s the left? If the left side is not set, 8px on the right will be used as the left inside margin by default, as will margin.

CSS you don’t know aboutemandrem

  • emWhen used in nesting can produce unexpected results if usedemIs greater than when a list element is multilevel nested1emThe text grows and shrinks.
<style>
        body {
            font-size: 30px;
        }
        
        ul  ul {
            font-size:.8em;
        }
    </style>
    
    <ul>
        <li>Level 1<ul>
                <li>The secondary<ul>
                        <li>Level 3</li>
                    </ul>
                </li>
            </ul> 
        </li>
    </ul>
Copy the code
<! Solve the problem -->
<! -- Add a root node pseudo-class selector -->
<style>
        body {
            font-size: 30px;
        }
        :root {
            font-size: 1em
        }
        ul {
            font-size:.8rem; /* This will only be evaluated relative to the root element */
        }
    </style>
Copy the code