CSS相关

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

• 联系：他们都能让元素不可见；
• 区别：
  • display: none;会让元素完全从渲染树中消失，渲染的时候完全不占据任何空间；visiblity: hidden;不会让元素从渲染树中消失，渲染树元素继续占据空间，只是内容不可见。
  • display: none;是非继承属性，子孙节点消失是因为元素从渲染树中消失造成的，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显示；
  • 修改常规流中元素的display属性，通常会造成文档重排。修改visibility属性只会造成本元素的重绘；
  • 读屏器不会读取display: none;元素的内容，会读取visibility: hidden;元素的内容。

2. 浮动元素引起的问题

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素会跟随其后

3. CSS优化、提高性能的方法有哪些？

• 多个css合并，尽量减少HTTP请求；
• 将css文件尽量放在文档的最前面（放在head标签中）；
• 移除空的css；
• 选择器优化嵌套，尽量避免层级过深；
• 充分利用css继承属性，减少代码量；
• 抽象提取公共样式，减少代码量；
• 属性值为0时，不加单位；
• css雪碧图；
• 避免使用css表达式；
• 充分利用css继承属性，减少代码量；

4. 浏览器是怎样解析CSS选择器的？

浏览器解析 CSS 选择器的方式是从右到左；

.something div span {
    font-size: 14px;
}

解释：

• 若是从左到右，上面的选择器会从.something开始，往下层遍历，如果遇到了不匹配的div，就要回溯到.something，然后再往下找，回溯若干次效率很低；
• 若是从右到左，先找到所有的最右节点span，然后向上寻找父节点div，然后由div向上寻找.something节点，就这样一步步去寻找匹配的父节点，最后找到根元素 html则结束这个分支的遍历。