CSS知识总结一、CSS基础 CSS，英文全称是 Cascading Style Sheet，层叠样式表。由李爵士的朋友

一、CSS基础

CSS，英文全称是 Cascading Style Sheet，层叠样式表。由李爵士的朋友赖先生发明。

why 层叠样式表

样式层叠，选择器层叠，文件层叠。css的这种特性导致它十分灵活。

CSS的版本

CSS 2.1是使用最广泛的版本
CSS 3 是最现代的版本可以在caniuse.com上查找哪些浏览器支持哪些特性。

CSS语法

样式语法

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

@语法

@charset "UTF-8";  /*声明文档字符编码为UTF-8*/
@import url(x.css);  /*导入x.css文档*/
@media (min-width:100px) {

}                       /*媒体查询*/

CSS调试

W3C CSS validateor ，W3C验证器，结果较为准确。
Webstorm 看颜色。但该软件要求电脑配置。
vscode 看颜色，只能看出大概。

border 调试法

如果怀疑元素的某个属性有问题，就在它前后依次加上border。如果border出现且设置的符合预期，说明代码的bug出现在该属性下方，可能是选择器或语法出现错误。

CSS文档流

在CSS中，文档的流动方向默认为从左到右（内联元素）、从上到下（块级元素）。内联元素的高度由line-height行高间接决定。而块级元素是其内部文档流元素高度的总和，可以被设置。

CSS盒模型

在对一个文档进行布局时，浏览器会将所有元素都表示为一个矩形的盒子，每个盒子由border、margin、padding和内容四部分组成。盒模型可以分为border-box和content-box，前者的width包括该盒子的padding、content以及border，后者的width只是内容content的宽度。一般使用border-box，因为其宽度就为设置的值，毋需进行加减宽度操作。

二、CSS布局

1、float布局

在子元素上加上float: left;和width属性，父元素加上如下属性，即完成float布局。

.clearfix::after {
      content: "";
      display: block;
      clear: both;
      }

使用负margin来处理平均布局问题。

2、flex布局

flexboxfroggy.com/#zh-cn

3、grid布局

二维布局，先在页面上画网格，再按需求取网格区域。 cssgridgarden.com/#zh-cn

三、CSS定位

垂直于页面上的顺序（由上至下）：内联元素、浮动元素、块级元素、border、background。

position的取值

static ，默认取值
relative ，用做位移或是属性position: absolute;元素的父元素
absolute ，相对于祖先元素中最近的一个定位元素来进行定位
fixed ，固定定位以上除了默认的static外均为定位元素。

层叠上下文

从上到下依次为：定位元素（z-index=0/1/2）、内联子元素、浮动元素、块级子元素、border、background、定位元素（z-index<0）。

每个层叠上下文都是一个小世界可查阅mdn有关文档看哪些属性可以创建一个层叠上下文。

四、 CSS动画

浏览器渲染的原理

根据HTML构建HTML树（DOM）
根据CSS构建CSS树（CSSOM）
将两棵树合并成一棵渲染树（render tree）
Layout布局（文档流、盒模型计算大小和位置）
Paint 绘制（边框文字颜色，阴影等）
合成，根据层叠关系展示画面

CSS动画的两种做法

transition法

为一个元素加上transition属性，再加上另外一个属性，transition即表示该元素在当前属性与新加属性之间的转换方式。
它的语法如下：
各参数依次为属性名称，持续时间，转化方式，延迟时间。


/* property name | duration | timing function | delay */
eg: transition: margin-right 4s ease-in-out 1s;

animation法

添加关键帧

两种方法

@keyframes x {
 from {transform: transitionX(100px);}
 to {transform: transitionX(10px);}
}
or
@keyframes x {
 0% {transform: transitionX(100px);}
100% {transform: transitionX(10px);}
}

链接：本人用第一种方法做的跳动的红心：
JS Bin (flachang.github.io)

给元素添加animation属性
它的语法为

/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

链接：本人用第二种方法做的跳动的红心：
JS Bin (flachang.github.io)