一.CSS3新型特性
- box-shadow(阴影效果)
- border-color(为边框设置多种颜色)
- border-image(图片边框)
- text-shadow(文本阴影)
- text-overflow(文本截断)
- word-wrap(自动换行)
- border-radius(圆角边框
- opacity(透明度)
- box-sizing(控制盒模型的组成模式)
- resize(元素缩放)
- outline(外边框)
- background-size(指定背景图片尺寸)
- background-origin(指定背景图片从哪里开始显示)
- background-clip(指定背景图片从什么位置开始裁剪)
- background(为一个元素指定多个背景)
- hsl(通过色调、饱和度、亮度来指定颜色颜色值)
- hsla(在hsl的基础上增加透明度设置
- 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()
*部分源于网络学习总结,有需要的朋友自取,笔试题小选择题会偶尔出现