CSS知识总结

CSS全称"层叠样式表",是由李爵士的挪威同事赖先生（Håkon Wium Lie）于1994年首先提出。

版本	时间	重点
CSS 1	1996年
CSS 2	1998年
CSS 2.1	2004~2011年	使用最广泛的版本(IE支持)
CSS 3	1999年开始起草	现代版本,分模块(IE8部分支持)

1.CSS语法

语法一：

选择器{
  属性名:属性值;
  /*注释*/
}

语法二：

@charset "UTF-8"; 
@import url(style.css); 
@media (min-width: 100px) and (max-width: 200px){
语法一
}

注意事项

• @charset必须放在第一行
• 前两个@语法必须以分号；结尾
• charset是字符集的意思，但是UTF-8是字符编码encoding，这是历史遗留问题

2.border调试法

步骤

1. 怀疑某个元素有问题，就给这个元素加border
2. border没出现？说明选择器错了或者语法错了
3. border出现了？看看边界是否符合预期
4. bug解决了才能把border删掉

3.基本概念

• 文档流
• 内联元素（inline），块（block），内联块（inline-block）
• margin合并
• content-box和border-box

overflow

当内容大于容器会溢出，可用overflow设置是否显示滚动条

• auto
• scroll
• hidden
• visible

4.CSS布局

• float 布局
• flex 布局
• grid 布局

5.浏览器渲染原理

过程步骤

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树（CSSOM）
3. 将两棵树合成一颗渲染树（render tree）
4. Layout布局（文档流、盒模型、计算大小位置）
5. Paint绘制（把边框颜色、文字模型、阴影等画出来）
6. Compose合成（根据层叠关系展示画面）

三种更新方式

1. JS/CSS>样式>布局>绘制>合成

2. JS/CSS>样式>绘制>合成

3. JS/CSS>样式>合成

6.CSS动画的两种做法（transition和animation）

1.transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。

transition语法

transition:属性名 时长 过渡方式 延迟

• 可以用逗号分隔两个不同属性
• 属性名为all 表示所有属性
• 过渡方式有linear(线性)、ease(非线性)等
• 不是所有属性都能过渡 比如：display:none=>block,一般改成visibility:hidden=>visible

transition例子

鼠标悬停跳动红心代码

鼠标悬停跳动红心动画

2.animation属性用来指定一组或多组动画，每组之间用逗号相隔

animation语法

可参考 animation MDN

使用方法

1. 先声明关键帧
2. 添加动画

animation例子

跳动红心代码

跳动红心动画