1. 什么是CSS
层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。CSS节省了大量的工作。 样式可以通过定义保存在外部.css文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。
2. CSS基础知识
2.1 CSS层叠
2.1.1 样式层叠
可以多次对同一选择器进行样式声明，例如：
div {
width: 50px;
}
div {
background-color: red;
}
这两个样式都会对分别div 产生影响，这就是样式层叠。
2.1.2 选择器层叠
通过多个选择器对同一个标签分别产生影响，例如：
div {
width: 50px;
}
div {
background-color: red;
}
.g{
height: 100px;
}
如果一个div有一个名字为g的class属性，那么上面三CSS样式都会对其产生影响。
2.1.3 文件层叠
因为CSS代码可以单独放到文件中，所以如果一个项目引入了多个css文件就有可能导致不同文件中的css样式都对同一个标签有影响。
3. 文档流
文档流主要分为三种 inline、block和inline-block。
3.1 流动方向
- inline元素从左到右，到达最右边才会换行，换行时可能会将一个完成的元素拆成两份，一个上一个下。
- block元素从上到下。
- inline-block元素从左到右，到达最右边会换行，和inline不同的是，它不会将一个完整的元素拆开。
3.2 宽度
- inline元素不能指定width，宽度是内部inline元素的和。
- block和inline-block都会自动计算宽度，同时也可以指定width。
3.3 高度
- inline元素不能指定height。
- block和inline-block高度由内部文档流元素决定，同时也可以指定height。
3.4 溢出
溢出是指内容大于容器的大小时如何显示，可以通过overflow属性指定，overflow可以分为overflow-x 和overflow-y代表横向和纵向。
有以下几个选项：
- auto 由浏览器决定是否显示。
- scroll 永远显示。
- hidden 隐藏溢出部分。
- visible 直接显示溢出部分。
3.5 脱离文档流
使用以下属性可以让一些元素脱离文档流的规范。
- float。
- position:absolute / fixed。
4. 盒模型
在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。而这个“”盒子“就被称为盒模型。CSS盒模型分两种，第一种是content box，另一种是border box。
4.1 border box
一个被定义成块级的（block）盒子会表现出以下行为:
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
- 每个盒子都会换行
width和height属性可以发挥作用- 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
- border box的宽度包含border，内边距和content。
除非特殊指定，诸如标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。
4.2 content box
如果一个盒子对外显示为 inline，那么他的行为如下:
- 盒子不会产生换行。
width和height属性将不起作用。- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于
inline状态的盒子推开。 - 水平方向的内边距、外边距以及边框会被应用且会把其他处于
inline状态的盒子推开。 - content box的宽度只包含content
用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。
4.3 margin合并
4.3.1 哪些元素的margin会合并
- 父子margin
- 兄弟margin
4.3.2 阻止合并
- 父子合并用display:flex
- 兄弟合并用inline-block
- 可能还有其他的。。。。
5. CSS布局
布局就是将屏幕分成多个块，然后进行排列。
5.1 布局分类
- 固定宽度布局。
- 不固定宽度布局，主要是使用文档流的原理。
- 响应式布局，在pc端使用固定宽度布局，手机段使用不固定宽度布局。
5.2 布局用到的属性
5.2.1 float 布局
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。这种布局主要是为了兼容ie浏览器。
步骤：
- 在子元素上加float:left 和 width。
- 在父元素上加上 .clearfix。
.clearfix具体写法为：
.clearfix:after{
content:'';
display: block;
clear: both;
}
5.2.2 flex 布局
flex CSS简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。
常用属性如下：
- display: flex 一个元素使用flex布局。
- flex-direction: row / column 元素横向或纵向排列。
- flex-wrap: wrap flex 元素 被打断到多个行中
- just-content: center 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
- just-content: space-berween 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
- aligin-items: center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
6. CSS定位–position
CSS **position**属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。
属性值：
-
static该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时
top,right,bottom,left和z-index属性无效。 -
relative该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
-
absolute元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并（如果使用了此属性，一般要在其父类或者其他祖先元素中使用relative，方便确定元素位置。同时要补top和left属性，不然某些浏览器会错乱）。
-
fixed元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。
fixed属性会创建新的层叠上下文。当元素祖先的transform,perspective或filter属性非none时，容器由视口改为该祖先（要补top和left属性，不然某些浏览器会错乱。手机页面上一定不要用这个属性）。 -
sticky元素根据正常文档流进行定位，然后相对它的*最近滚动祖先（nearest scrolling ancestor）*和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于
top,right,bottom, 和left的值进行偏移。偏移值不会影响任何其他元素的位置。
7. CSS动画
动画本质是由很多静止的图片以一定的速度连续播放形成的。
7.1 浏览器渲染原理
渲染过程：
- 根据HTML构建HTML树。
- 根据CSS构建CSS树。
- 将两棵树合并成一颗渲染树。
- 进行Layout布局。
- 进行Paint绘制。
- 进行Compose合成。
如果能够在浏览器渲染的过程中省略其中某些步骤可以大大增加其效率。
例如如下三种常见的更新动画的方式渲染步骤会有很大不同：
- div.remove() 所有步骤都走一遍。
- 改变背景颜色 跳过 layout。
- 改变 transform 跳过layout 和paint。
所以尽量使用第三种方式。
72
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
