这是我参与笔记创作活动的第8天
今天的视频课[理解CSS]是讲解css的一些知识，面向刚刚入门的前端同学，主要讲述了css的整体主要组成及一些比较重要的知识。css作为前端的三剑客是必不可少的一门技术，当然学好它也是相当不容易的，本节课从基础开始，一步步加深难度，希望大家有不错的收获。
我对今天讲解的知识进行了概括与整理，主要分为几个部分展示，具体内容如下：
1.基础知识
1.层叠、优先级
在css中样式会出现层叠现象，而它的规则有三个：
- 样式表来源
- 选择器优先级
- 源码位置
选择器的优先级主要以如下排列：内联>id>class=attribute=pseudo-class>type=pseudo-element
而源码位置的判断主要有三种方式，分别为：行内样式，内部样式以及外部样式。它们的优先级为：行内样式>内部样式>外部样式。
2.继承
继承属性在css中非常常见，它主要表现为子元素继承了父元素的一些属性。大部分具有继承特性的属性跟文本相关，比如∶color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing等等。
3.css的值和单位
css中的属性如width等具有具体的值和单位，其中值可以分为以下三种：
- 文字类:比如像initial这种关键字，颜色、位置等等
- 数值类:比如z-index:1这种数值，或者带有单位的数值、百分比等
- 函数生成︰比如calc(), min(),max()等
另外单位也有多种分类：
2.布局
1.css中的可以通过不同布局的使用，实现各种漂亮的页面。有常规流、弹性盒子、Grid、定位等布局方式。常规流就是各种元素原始的布局方式，我在这不再赘述，主要讲一下其他几种布局方式。
2.弹性盒子布局
弹性盒子是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向（横向/纵向)的调整更为灵活。
弹性盒子的一些属性如下：
3.网格布局
Grid布局可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列。它具有以下属性：
4.定位Position
定位是为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当postion属性的取值非static的时候，可以使用top,right,bottom, left对其进行定位。
- 相对定位relative：元素相对于自己原来在文档流中的位置进行定位,但是原来文档流的空间还在。
- 绝对定位absolute：元素被移出正常文档流，且没有预留空间，相对于最近的非static定位祖先元素的进行定位。
- 固定定位fixed：元素被移出正常文档流，且没有预留空间，相对于屏幕视口进行定位，屏幕滚动也不会改变位置。
- 粘性定位sticky：元素相对它的最近滚动祖先(祖先的overflow是scrollV/hidden/auto)的视口(scrollport)定位。
3. 层叠上下文
层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开
要形成层叠上下文有以下条件（满足其一就可以）：
4. 变形、过渡、动画
1.transform变形 2D
2D属性有： transform：translate（移动）、rotate（旋转）、scale（放缩）、matrix（变形矩阵）等
transform-origin：right top、center等，表示变形时依据的原点。
2.transform变形 3D
3D相关属性有： transform：translate3d、rotate3d、scale3d、matrix3d等
transform-origin：right top、center等，表示变形时依据的原点。
transform-style: flat或 preserve-3d看子元素的3d表现。
perspective:观看点距离z=0这个平面的距离，可以在transform中用perspective()使用作用为当前元素,也可以直接使用，给后代元素一个统一值。
backface-visibility︰元素正面只有朝向观察者的时候可见。
3.transition过渡
通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态。
4.animation动画
@keyframes 关键帧用来定义动画过程中出现的关键样式。animation-*相关属性用来为元素添加动画，它具有以下属性：
