高频CSS面试题，持续更新ing

1.css样式优先级？

1.  !important
2.  内联样式
3.  id选择器
4.  类选择器、伪类选择器、属性选择器。
5.  标签选择器、伪元素选择器。

2.css实现三列布局？

1.  float浮动（后续其他内容，需要手动清除浮动，否则会影响到）
2.  position固定+margin偏移（需要设置父div和子div的position）
3.  flex布局（当前主流的方法，稳定性较好） 

 3.如果要优化，css提高性能可以做哪些呢？

     内联首屏关键css：
         First Meaningful Paint，简称FMP，内联css文件限制（tcp）需要再14.6kb，可用压缩css插件来控制文件限制

     异步加载css：

        a.  js动态创建Link标签

        b. 使用link标签内的media属性，设置为不匹配的媒体类型（print/noexist），降低加载优先   级;结束后要设置回来

        c.  使用 link 标签内的 rel 属性，设置为可选样式表(alternate stylesheet)，结束后设置回来

        d.  一般用rel='preload'进行异步加载

     资源压缩：

        利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间

     合理使用选择器

        #markdown .content h3

        a.  从右到左：先找到h3标签元素 然后.content 最后#markdown

        b.  嵌套的层级更多，页面元素更多，那么匹配所要花费的时间代价自然更高

        c.  不要嵌套使用过多复杂选择器，最好不要三层以上

        d.  使用id选择器就没必要再进行嵌套

        e.  通配符和属性选择器效率最低，避免使用
 

     减少使用昂贵属性
        在页面发生重绘的时候，昂贵属性如 box-shadow / border-radius / filter / 透明度 / :nth-child 等，会降低浏览器的渲染性能

     不要使用@import

        a.  css 样式 文件有两种引入方式，一种是 link 元素 ，另一种是 @import

        b.  @import 会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时

        c.  而且多个 @import 可能会导致下载顺序紊乱，比如一个 css 文件 index.css 包含了以下内容：@import url("reset.css")

        d.  那么浏览器就必须先把 index.css 下载、解析和执行后，才下载、解析和执行第二个文件reset.css

4.子div实现水平垂直居中

实现方式很多，比如浮动/定位+偏移/边距，最佳方式父flex，子margin：auto。

5.margin，padding区别

作用域不同，margin针对外部元素，padding针对内部元素