基础知识点和概念

CSS是什么

CSS（Cascading Style Sheets，缩写为 CSS）层叠样式表，用于设置网页的样式及布局。例如可以给内容加上不同的颜色、大小以及间距等。例如：

p {
    /* 设置字体颜色 */
    color: red;
    /* 设置字体大小 */
    font-size: 16px;
}

上面的就表示了给字体的颜色设置为红色，大小16px。

语法格式

层叠样式表（ Cascading Stylesheet ，简称为CSS），其主要的作用就是通过声明元素的一些样式进而使得浏览器在绘制的时候根据已规定的样式进行绘制。其语法格式主要为：

属性（property）是一个标识符，用可读的名称来表示其特性。
属性值（value）则描述了浏览器引擎如何处理该特性。每个属性都包含一个有效值的集合，它有正式的语法和语义定义，在使用的过程中一个属性和属性值的键值对就被成为声明。

文档流

在CSS的世界中，他会把元素根据类似文档的方式进行排列（从左到右，从上到下），而且会根据元素的特性进行排列，其主要的特性如下：

所有的块级元素自己占用一行，且可以设定高度、宽度、内边距、外边距。块级元素的宽度是其容器（父节点）宽度的100%。所以常见的过程中块级元素都是一行一行排列的。
内联元素主要有相邻的内联元素可以在一行上，内联元素设定宽度和高度无效，内联元素可以设定内边距，但是设定外边距时，只有水平方向有效。所以常见的过程中内联元素默认会在一行里一列一列的排布，当一行放不下的时候，内联元素会自动切换到下一行继续按照列排布；

脱离文档流的方式

脱离文档流指的是当节点脱离正常的文档流之后，那么其后面的节点会占据其原先的位置进行补位，脱离的节点将不占据文档流中的空间。脱离文档流的方式有：

浮动：给元素设置float:left/right;,那么该元素将脱离文档流，会移动到容器的左边或者右边或者是另外一个浮动元素的旁边，该浮动元素原先的位置将被后面文档流中的元素所填补。且浮动的子元素是无法超出父元素的范围的，如果父元素设置的有内边距（padding）,那么浮动的元素将不会超出内边距的范围。在使用的过程中给子元素浮动之后一般需要清除浮动。
定位：使用绝对定位（position: absolute）或者固定定位（position: fixed）都会使得元素脱离文档流。空出来的位置将会被文档流该元素原先的后面的元素进行补位。

盒模型

在CSS中，任何一个元素都可以看成是一个盒子，其组成的有：内容（content）、内边距（padding）、边框（border）、外边距（margin）。盒模型可以分为两种：

标准盒模型在标准盒模型（content-box）中，给元素设置的width属性只包含content，不包含border和padding。例如：

<div class="model"></div>

.model {
    margin: 10px;
    padding: 5px;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    background: red;
}

通过上面可以看出此时的content的width和height仍然是200px，所设定的width/height的数值的并不包含border和padding的。在标注的盒模型中：
width/height = 内容的宽度（高度）

IE盒模型在IE盒模型（border-box）中，给元素设置的width属性包含content、border和padding。例如：

.model {
    margin: 10px;
    padding: 5px;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    background: red;
    /* 声明该元素为IE盒模型 */
    box-sizing: border-box;
    }

通过上面可以看出此时的content的width和height的数值改变成为了188px,而我们设置的width和height的数值是200px,此时我们可以看到IE盒模型中：
width（height） = content + padding + border
很显然我们所设定的width和height的数值被padding和border改变了。因此在IE盒模型中，元素被设置的width和height的数值是会受到padding和border占据的。

浮动和定位

浮动

浮动就是使得元素脱离标准流，移动到其父元素制定的位置的过程。在CSS中其是使用float来表示的，其取值主要有以下几种：

none：表示不浮动，这个属性也是默认的方式;
left: 表示左浮动;
right: 表示右浮动;
inherit: 继承其父元素的浮动属性。例子:

<div class="content">
    <div class="leftContent">我是浮动后左边的元素</div>
    <div class="rightContent">我是浮动后右边的元素</div>
    <div class="noneContent">我是不浮动的元素</div>
</div>


.content {
    outline: 1px solid rgb(149, 10, 10);
}
.content .leftContent {
    width: 100px;
    height: 100px;
    background: red;
}
.content .rightContent {
    width: 100px;
    height: 100px;
    background: yellow;
}
.content .noneContent {
    width: 120px;
    height: 120px;
    background: green;
}

当没设置浮动的时候可以看出是根据文档流的默认方式排列的.因为div是块级元素，独占一行的，所以从上到下依次排列。但是当设置了浮动之后

.content .leftContent {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.content .rightContent {
    width: 100px;
    height: 100px;
    background: yellow;
    float: right;
}

由上图可以看出设置浮动之后元素就会根据所设置的属性移动到对应的位置。而不浮动的元素会对其进行补位，此时的浮动元素相当于浮起来了，所以会对后面不浮动的元素造成影响。当我们去除不浮动的元素之后可以看出此时的效果为：

此时可以子元素浮动之后，父元素在没有设定高度的时候，其父元素的高度是无法撑开的。此时我们希望其父元素的高度是可以被子元素撑开的，我们这时候可以采用清楚浮动的方式。

<div class="content clearfix">
    <div class="leftContent">我是浮动后左边的元素</div>
    <div class="rightContent">我是浮动后右边的元素</div>
    <div class="noneContent">我是不浮动的元素</div>
</div>

.content {
    outline: 1px solid rgb(149, 10, 10);
}
.content::after {
    /* content:'';`表示给`.clearfix`元素内部最后添加一个内容，该内容为行内元素。 */
    content: '';
    /* `display:block;`设置该元素为块级元素 */
    display: block;
    /* -   `clear:both；`清除浮动的方法。此属性是必须要写的 */
    clear: both;
}
.content .leftContent {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.content .rightContent {
    width: 100px;
    height: 100px;
    background: yellow;
    float: right;
}

此时的结果就是：

可以看出此时虽然父元素并没有设置height，但是仍然被其子元素撑开。

定位

在CSS中，我们是可以使用position属性来进行元素的定位。position 属性规定元素的定位类型。其取值主要有以下几种：

static：所有不设定定位的元素，定位方式都是static（缺省方式），其特性是不脱离标准流、偏移不起作用：top right bottom left。
relative: 相对定位，不脱离标准流、偏移起作用：top right bottom left，起始点从元素本来应该所在的位置的左上点、relative作为absolute的基准、如果同时设定了left和right，只有left有效；如果同时设定了top和bottom，只有top有效。
absolute: 绝对定位,脱离标准流，不跟着滚动条一起滚动、偏移起作用：top right bottom left，当元素被设置为绝对定位的时候，其偏移的起点主要分为：没有任何一层的祖先节点有定位（relative，absolute，fixed），以浏览器的可视区为起始点，父元素有定位（relative，absolute，fixed），以父元素的内角（border和padding的分界线）为起始点；margin对子元素定位有影响，padding，border对子元素定位没有影响，如果有一个或者多个祖先元素有定位（relative，absolute，fixed），以最近的祖先元素的内角。借助此属性可以进行元素的居中，在使用的时候可以借助负margin。
fixed: 固定定位,脱离标准流，不和滚动条一起滚动,偏移起作用： top right bottom left,不受父元素的影响，只依据浏览器的可视区定位。当一个元素被设定为固定定位时，所以如果开始没有设定宽度，设定后宽度为最小。

浏览器渲染原理

浏览器渲染过程：

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

那么如何更新样式呢，此时我们可以采用使用JS更新样式，例如：div.style.background= 'red'、div.style.display = 'none'、div.classList.add('red')等操作更新样式。

CSS 动画的两种做法

区别

animation（动画）:用于设置动画属性，他是一个简写的属性，包含6个属性
transition（过渡）：用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform（变形）：用于元素进行旋转、缩放、移动或倾斜
translate(平移):该属性是transform的一个属性，平移。

transition

其作用主要为补充关键帧。语法格式为： transition：属性名时长过渡方式延迟
在使用过程中可以使用逗号分隔开不同的属性。可以使用all代表所有属性。过渡的方式主要有：

linear
ease
ease-in
ease-out
ease-in-out 在实际的使用过程中并不是所有的属性都是可以过渡的，例如：
display：none ==》block 是无法过渡的（对于此种情况一般是采用visibility：hidden ==》 visible）
过渡必须需要有起始，如hover和非hover的状态的过渡。如果我们此时想在其中加上中间点可以采用什么方式呢，下面有两种方式参考：首先我们有一个起始点a,此时我们使用transform过渡带状态b，而此时我们把b当做起始点再次使用transform属性过渡到状态c,而此时的状态b这个点就是我们所添加的中间点。那么如何知道我们此时是否到达中间点呢，我们这个时候可以使用setTimeout来监听transitionend的事件。另外一种就是采用animation，那么animation是什么呢？

animation

动画，同时声明关键帧的方式来进行动画不同状态的设定。
@keyframes:CSS通过定义动画序列中的关键帧（或航点）样式来控制 CSS 动画序列中的中间步骤。与过渡相比，这样可以更好地控制动画序列的中间步骤。语法格式主要有以下的几种：


@keyframes slidein {
  /* from:起始偏移量 */
  from {
    transform: translateX(0%);
  }
  /* to:结束偏移量 */
  to {
    transform: translateX(100%);
  }
}

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

CSS 知识总结