小问题整理

一.CSS3新型特性

1. box-shadow（阴影效果）
2. border-color（为边框设置多种颜色）
3. border-image（图片边框）
4. text-shadow（文本阴影）
5. text-overflow（文本截断）
6. word-wrap（自动换行）
7. border-radius（圆角边框
8. opacity（透明度）
9. box-sizing（控制盒模型的组成模式）
10. resize（元素缩放）
11. outline（外边框）
12. background-size（指定背景图片尺寸）
13. background-origin（指定背景图片从哪里开始显示）
14. background-clip（指定背景图片从什么位置开始裁剪）
15. background（为一个元素指定多个背景）
16. hsl（通过色调、饱和度、亮度来指定颜色颜色值）
17. hsla（在hsl的基础上增加透明度设置
18. rgba（基于rgb设置颜色，a设置透明度）

二.link与@import

1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议，下文将详解)
link引入的样式权重大于@import引入的样式。

源自：博客园

三.导致回流和重排的操作

重绘和回流（重排）

1.重绘

    *元素外观发生变化，不影响整体HTML布局，重新把元素绘制的过程

    影响操作

    .改变元素的颜色相关属性；

    .visiblity,outline等等。。。

2.回流

    *元素的位置，大小等变化，变影响了整体html布局，重新排列的过程，也就重排

   影响的操作

   .dom的增删操作；

    .元素的位置改变，大小改变，margin，padding，border等；

    .元素的字号font-size等属性改变；

   .浏览器窗口的改变会触发resize事件；

   .激活css伪类，:hover属性等等;

   .查询一些属性也会导致，

offsetTop、offsetLeft、 offsetWidth、offsetHeight、

scrollTop、scrollLeft、scrollWidth、scrollHeight、

clientTop、clientLeft、clientWidth、clientHeight；

scrollIntoView()、scrollIntoViewIfNeeded()

getComputedStyle()

getBoundingClientRect()

scorllTo()

*部分源于网络学习总结，有需要的朋友自取，笔试题小选择题会偶尔出现