css又称层叠样式表，其中css2.1最为广泛，css3之后便是分模块升级。
首先在加入css样式时用border调试法，加入边框便可清楚发生什么变化，方便我们继续写代码。
1、css的文档流
- 行内元素：inline ，宽度由内容决定，高度由line-height间接决定。
- 行内块元素：inline-block，整个元素是个整体，不会分开，宽度由内容和内联元素总和决定，高度由文档流元素总和决定。
- 块级元素：block，能有多宽，就有多宽，宽度：占据整行。高度由文档流元素总和决定。
2、盒模型
box-sizing：content-box/border-box
二者区别前者宽度等于内容，后者宽度等于border+padding+内容。
（小知识）
- block : margin会合并,上下重叠，左右不重叠。（如果要不合并，可以加border，加padding，加overflow：hidden）
- 单位：em：font-size的倍数。
- 颜色：transparent ：完全透明。
3、布局
（1）float布局
子元素加float：left和宽度，元素脱离文档流，父元素必须加上.clearfix
.clearfix:after{
display:block;
content:"";
clear:both;
}小知识
vertical-align:top/middle 消除图片下的空隙。
outline：不占位置。
有宽度的块级元素： auto 左右居中。
使用float做平均布局 （要加入-margin）
（2）flex布局
（1）容器：container
（2）内容：items
flex布局分容器样式和内容样式，容器样式有很多种比如：决定方向，是否换行，主轴（justify-conten）的对齐方式，次轴（aligin-items）的对齐方式等。
内容样式：
order：排列顺序（从小到大）默认是0
flex-grow：分配多余空间
flex-shrink：缩小，默认是1，0不能小。
align-self：会对齐当前 flex 行中的元素，并覆盖已有的algin-items的值。
（3）grid布局（网格布局）
（1）容器：container
（2）元素：items
列 ：grid-template-columns
行：grid-template-rows
grid-template-areas: （划分）
"a a a"
"b c c"
"b c c";
grid-area：（分配）
4、定位 （垂直屏幕方向）
层叠上下文：（最底层到最上层）：z-index：-1 ->background ->border ->块级子元素 -> 浮动元素 -> 内联子元素（内容）->z-index：1
产生层叠上下文：
- 文档根元素（
<html>）； position值为absolute（绝对定位）或relative（相对定位）且z-index值不为auto的元素；position值为fixed（固定定位）或sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；- flex (
flexbox) 容器的子元素，且z-index值不为auto； - grid (
grid) 容器的子元素，且z-index值不为auto； opacity(密度)属性值小于1的元素；mix-blend-mode属性值不为normal的元素；
更多请看（
层叠上下文developer.mozilla.org
N/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context）
5、动画
首先知道浏览器渲染原理：
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSDOM）
- 将2棵树合并成一颗渲染树（render tree）
- Layout布局（文档流、盒模型、计算大小和位置）
- Paint 绘制（把边框颜色，文字颜色，阴影等画出来）
- Composite合成（根据层叠关系展示画面）
三种更新方法：
（1）transition（过渡）：属性名 时长 过度方式 延迟
搭配transform的移动translate， 缩放scale，旋转rotate等展示动画
（2）animation： 名字 时长 动画方式 等属性
@keyframs 名字{
0%{}
50%（）
100%（）
}（创建动画）
以上便是css的总结欢迎补充~
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
