[路飞]- 你不知道的css

我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

你不知道的css之flex

• 如果你的页面是横向多列布局，最好不好用flex,尽量使用grid或浮动；
• 如果是纵向的flex布局，不需要担心；

原因：拿三列布局为例，首先页面会首先加载前两列的1和2（图1），此时页面绘制好了，但是3还没加载出来，这是重新计算1和2的位置，给3留出布局空间，会触发页面回流。导致页面渲染两次。

你不知道的css之@supports

• 在浏览器不断更新的时候css出现了许多的新规范，大多数新规范不适用旧的浏览器。那么@supports就是一个很好的选择，通过这个api可以知道是否支持.不过@supports本身也要考虑浏览器兼容性。

/*常见用法：*/
@supports not (display:flex)  or (xx) and (xx){}

你不知道的css之inherit和initial

• 有时候我们想继承代替一个层叠值，这时候可以使用inherit，并且只有某些属性会被继承，包括文本，列表，表格边框相关属性。
• 有时，我们要撤销作用于某个元素样式，需要用到initial

你不知道的css之用padding/margin

• 在有时候我们会见到这样的赋值

padding: 10px 8px 12px;

10px代表上，8px代表右，12px代表下，那左边是多少呢？ 左边如果没有设置值，默认会将右边的8px作为左边的内边距，margin也是一样。

你不知道的css之em和rem

• em在嵌套使用的时候会产生意外的结果，如果用em给列表元素多级嵌套时，大于1em文字会逐渐增大，反之，逐渐缩小。

<style>
        body {
            font-size: 30px;
        }
        
        ul  ul {
            font-size: .8em;
        }
    </style>
    
    <ul>
        <li>
            一级
            <ul>
                <li>
                    二级
                    <ul>
                        <li>
                             三级
                        </li>
                    </ul>
                </li>
            </ul> 
        </li>
    </ul>

<!--解决问题-->
<!--添加一个根节点的伪类选择器-->
<style>
        body {
            font-size: 30px;
        }
        :root {
            font-size: 1em
        }
        ul {
            font-size: .8rem; /*这样字号只会相对于根元素做计算了*/
        }
    </style>