1. 常识和工具网站

css层叠样式表：

可以多次对同一选择器进行样式声明
可以用不同选择器对同一个元素进行样式声明
可以用多个文件进行层叠

css2.1是世界上使用最广泛的版本
caiuse.com可以查看浏览器支持哪些特性
css spec css最权威的文档
搜索css用mdn，css tricks，张鑫旭的博客
psd设计文档或者设计图可以上Freepick、365psd,以及有个dribbble.com顶级设计师社区
常用的草图工具有balsamiq、figma、墨刀、adobe xd
http：//csstriggers.com// 可以用来看每个属性的渲染流程，如果要做页面优化可以用到，浏览器优化还可以看developers.google.com

2. 盒模型

盒子模型有content box和border box，两者的组成部分是一样的，都包括content、padding、border、margin

在标准盒子模型content box中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

IE盒子模型border box中，width 和 height 指的是内容区域+border+padding的宽度和高度。

margin的合并问题（父子margin合并、兄弟margin合并）可以用display:inline-block取消，只有上下会合并。父子合并可以用padding/border挡住或者用overflow:hidden display:flex挡住兄弟合并可以用inline-block消除

3. 单位和颜色

单位：px、em、百分数、整数、rem、vw和vh 颜色：#000000十六进制，支持最后两位设置透明度；rgb(x,x,x)； rgba(x,x,x,x)最后一位设置透明度0~1；hsl(x,x,x)参数分别是色相、饱和度、亮度

4.css布局

1. float布局

专门为了ie准备的布局

子元素加上float:left和width
父元素加上.clearfix

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

最后一个元素预留一些空间
vertical-align-top可以去掉多余背景色
border可以用outline代替
水平居中：

margin-left:auto;
margin-right:auto;

2. flex布局

display:flex或inline-flex让一个元素变成flex容器

flex-direction:column|row|column-reverse|row-reverse;
flex-wrap:wrap|nowrap; //换行或者不换行
justify-content:flex-start|flex-end|center|space-between
align-items:center|flex-end|flex-start|stretch

还可以用order给各个元素添加顺序来改变某个元素的顺序

3. grid布局

适合二维布局，display:grid|inline-grid父元素成为grid容器，具体用法看文档，目前用不到

flexboxfroggy.com/#zh-cn青蛙游戏体…

5. css定位

布局在平面上，定位垂直于平面
border-box中背景background的范围是border的外边沿围成的区域

position:static|relative|absolute|fixed|sticky

默认的上下文是html，但是只要z-index不是auto就会创建层叠上下文，z-index取值数字具体看mdn 层叠上下文

6. css动画

渲染原理：

根据html构建html树（dom）
根据css构建css树（cssom）
将两棵树合并成一颗渲染树（render tree）
layout布局（文档流、盒模型、计算大小和位置）
paint绘制（把边框颜色、文字颜色、阴影等）
compose合成（根据层叠关系展示画面）

js优化使用requestAnimationFrame代替setTimeout或者setInterval
css优化使用will-change或translate

1.transform

位移translate、缩放scale、旋转rotate、倾斜skew，可以配合使用transition过渡，会自动补帧，注意的是inline元素不支持transform，需要先block

2. animation

animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
animation:xxx 1.5s;
@keyframes xxx{
    0%{
       xxx
    }
    100%{
       xxx
    }
}

css知识总结