CSS 知识总结

一、CSS是用来修饰网页的，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明：

选择器通常是需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性是希望设置的样式属性，每个属性有一个值，属性和值被冒号分开。

三、如果要在HTML元素中设置CSS样式，可以在元素中设置"id" 和 "class"选择器。

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

四、文档流

流动方向：

inline元素从左到右，到达最右边换行

block元素从上到下，每一个都另起一行

inline-block元素从左到右，不会分割

宽度：

inline宽度为内部inline元素的和，不能用width指定

block默认自动计算宽度，可用width指定

inline-block结合前面两者，可用width

高度：

inline高度由line-height间接确定，跟height无关

block高度由内部文档流元素决定，可以设height

inline-block跟block相似，可以设置height

五、盒模型

两种盒模型：content-box-内容就是盒子的边界；border-box边框才是盒子的边界

公式：content-box width=内容宽度；border-box width=内容宽度+padding+border

六、CSS布局

float布局

步骤：子元素加上float：left和width

父元素加上.clearfix

flex布局

display:flex

flex-direction:row/column

flex-wrap:wrap

justify-content:center/space between

align-items:center

七、CSS定位

CSS布局平放在界面，CSS定位垂直于界面

position属性

static：默认值，待在文档流里

relative：相对定位，升起来，但不脱离文档流

absolute：绝对定位，定位基准是祖先里的非static

fixed：固定定位，定位基准是viewpoint

sticky：粘滞定位

八、浏览器渲染原理

1、根据HTML构建HTML树（DOM）

2、根据CSS构建CSS树（CSSOM）

3、将两棵树合并成一颗渲染树（render tree）

4、layout布局（文档流、盒模型，计算大小和位置）

5、paint绘制（边框颜色、文字颜色、阴影等）

6、compose合成（根据层叠关系展示画面）

九、CSS动画，transition和animation

CSS transition是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性，指定效果的持续时间。

要添加多个样式的变换效果，添加的属性由逗号分隔：

CSS animation是使元素从一种样式逐渐变化为另一种样式的效果。

可以改变任意多的样式任意多的次数。

用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

要创建 CSS动画，你需要了解 keyframes 规则。

keyframes 规则是创建动画。

keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

指定至少这两个CSS的动画属性绑定向一个选择器：规定动画的名称，规定动画的时长