CSS 知识点

1、 link 和@import 有什么区别？

1. Link 属于 html 标签，而@import 是 CSS 中提供的
2. 在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS
3. @import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题
4. Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

2、rgba()和 opacity 的透明效果有什么不同？

1. rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，
2. 而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

3、BFC

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

形成 BFC 的条件:

1. 浮动元素，float 除 none 以外的值
2. 定位元素，position（absolute，fixed）
3. display 为以下其中之一的值 inline-block，table-cell，table-caption
4. overflow 除了 visible 以外的值（hidden，auto，scroll）

BFC 的特性:

1. bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
2. BFC元素垂直方向的边距会发生重叠
3. BFC的区域不会与浮动元素的box重叠（可用于清除浮动）

4、display:none 与 visibility:hidden 的区别是什么？

1. display : 隐藏对应的元素但不挤占该元素原来的空间。
2. visibility: 隐藏对应的元素并且挤占该元素原来的空间。

5、 display:inline-block 显示间隙？

1. 原因是因为，换行或空格会占据一定的位置
2. 解决方法：父元素中设置 font-size:0;letter-spaceing:-4px;
3. 浮动也可以

6、超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

1. 被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link,visited,hover,active）

7、css sprite 是什么,有什么优缺点

1. 他是将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
2. 优点：
3. 减少 HTTP 请求数，极大地提高页面加载速度。
4. 增加图片信息重复度，提高压缩比，减少图片大小。
5. 更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现。
6. 缺点：
7. 图片合并麻烦。
8. 维护麻烦，修改一个图片可能需要从新布局整个图片，样式。

8、什么是 FOUC?如何避免

1. 在引用 css 的过程中，如果方法不当或者位置引用不对，会导致某些页面出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效，简称 FOCU。
2. 原因大致为：
3. 使用 import 方法导入样式表
4. 将样式表放在页面底部
5. 有几个样式表，放在 html 结构的不同位置。
6. 其实原理很清楚：当样式表晚于结构性 html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
7. 解决方法：使用 link 标签将样式表放在文档 head 中。

9、CSS 在性能优化方面的实践

1. 内联首屏关键 CSS（Critical CSS）
2. 内联 CSS 能够使浏览器开始页面渲染的时间提前，只将渲染首屏内容所需的关键 CSS 内联到 HTML 中
3. 异步加载 CSS
4. 文件压缩
5. 去除无用 CSS

10、盒子模型

类别：标准盒子模型、怪异盒子模型(又称 IE盒子模型)

区别：宽高计算方式不同

           怪异 width = border + padding + content

           标准 width = content

如何设置：box-sizing

box-sizing:content-box;
box-sizing:border-box; /*IE模型*/

11、z-index属性失效

1. 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
2. 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
3. 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block

12、为什么有时候⽤translate来改变位置⽽不是定位？

ranslate 是 transform 属性的⼀个值。

改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。

⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。

transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效，

可以缩短平滑动画的绘制时间。 ⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

13、伪元素和伪类的区别和作用

伪元素：在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

伪类：将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}

伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。​​​​​​​