HTML+CSS基础面试题总结

1. display:none; 和visibility:hidden;的区别

display:none; 彻底消失，释放空间。可能引发页面的reflow回流（重排）。
visibility:hidden; 就是隐藏，但是位置没释放，好比opacity:0; 不引发页面回流。

2.CSS 选择器权重如何计算

就近原则：直接选中的，一定比继承的权重大。
一样近，比权重：
id是100，class是10，标签是1，
总数权重一样谁写在下面听谁的。
行内 > 内嵌 = 外联 > 导入
!important能够提升权限，但是不能提升继承的
class=“a b c” 和挂载顺序无关，看写的顺序

3.web 前端开发，如何提高页面性能优化

数据懒加载：不显示的东西不加载，需要显示了才加载。
小图标用精灵图，合并成一张字库用gb2312不要utf-8，一个汉字少一个字节。
图片用base64
路由懒加载、组件不用不加载
使用gulp、grunt、webpack等工具压缩html、js、css代码

4.什么叫优雅降级和渐进渐强

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器
进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行
兼容。

5.如何垂直水平居中一个元素

.parent{
display:flex;
justify‐content: center;
align‐items: center;
}

6.如何实现6px大小的字

font‐size:12px;
transform: scale(.5)

7.对单位px、em、rem、vh、vw的理解

px物理像素，绝对值；