css是做什么的？

给指定标签或者指定类型标签加样式的。
查找资料
1 MDN
2 css tricks
查看浏览器对CSS属性的支持
caniuse.com

元素摆放的规则？文档流指定。

display: line | block | inline-block
流动方向

inline 元素从左到右，到达最右边才会换行
block 元素从上到下，每一个都另起一行
inline-block 也是从左到右，但是元素不会分成两行宽度
inline 宽度为内部 inline 元素的和，不能用 width 指定
block 默认自动计算宽度，可用 width 指定
inline-block 结合前两者特点，可用 width 高度
inline 高度由 line-height 间接确定，跟 height 无关，跟文档流也无关
block 高度由内部文档流元素决定，可以设 height
inline-block 跟 block 类似，可以设置 heigh，设置的高度小于内容高度后，内容会溢出，溢出的显示由overflow指定，overflow: visible | hidden | auto

内部元素脱离文档流？

float: left
position: absolute

元素摆放的模型，合模型

box-sizing: boder-box | content-box (默认值content-box，但基本上是用boder-box)

指定盒模型类型为边框盒时， box-sizing: border-box; 设置的宽度是指，内容宽度+padding宽度 + border宽度
指定盒模型类型为内容盒时， box-sizing: content-box; 设置的宽度是指，内容宽度 一般来说，在css文件前指定默认为boder-box

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

另外，合模型的外边距margin上下会合并，分为父子margin合并和兄弟margin合并，兄弟合并一般是符合预期的
如何阻止父子合并?

父子合并用 padding / border 挡住，设置
父子合并用 overflow: hidden 挡住
父子合并用 display: flex

float布局，某些版本ie上必须用的布局

父元素加 clearfix ，否则就不能包裹子节点
子元素加上float: left

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

flex布局，最重要，应用最为广泛的布局方式

参考资料
www.runoob.com/w3cnote/fle…
通关游戏
flexboxfroggy.com/#zh-cn
flex布局父元素的属性：

display: flex;
flex-direction // 主轴方向 row | row-reverse | column | column-reverse;
flex-wrap // 换行方式 nowrap | wrap | wrap-reverse;
flex-flow // flex-direction 与 flex-wrap 的间写形式
justify-content // 主轴排列方式 flex-start | flex-end | center | space-between | space-around;
align-items // 交叉轴对齐方式 flex-start | flex-end | center | baseline | stretch;
align-content // 轴线的对齐方式 flex-start | flex-end | center | space-between | space-around | stretch; flex布局子元素的属性：
order // 顺序，默认是0
flex-grow // 布局放大占比，默认是0
flex-shrink // 布局缩小占比，默认是1，值为0代表不缩小
flex-basis // 不清楚
flex // flex-grow, flex-shrink 和 flex-basis的简写
align-self // 子布局在交叉轴上的摆放方式，auto | flex-start | flex-end | center | baseline | stretch;

grid布局，最新最灵活的布局方式，但是浏览器支持度不如flex

参考资料
www.runoob.com/css3/css-gr…
通关游戏
cssgridgarden.com/
grid布局父元素常用属性，注意，这些属性值设置非常灵活

display: grid;
grid-template-columns: 50px auto 60px;
grid-template-rows: 60px auto 60px;
grid-gap: 10px;
grid-template-areas:
    "header header header"
    "aside main ads"
    "footer footer footer";

grid布局子元素常用属性

grid-row-start: 1;
grid-row-end: 3;
grid-area: ads;

css定位，position属性指定

position: static | relative | absolute | fixed | sticky

1 position: static, 默认值，非定位元素
2 position: relative , 布局不脱离文档流，只是看起来偏离了一点而已，在定位上基本不用，但是，配合 z-index 属性，比如设置z-index=1，相对默认的z-index=0，会让布局出现在上面
3 position: absolute , 脱离文档流，脱离原来的位置，甚至脱离父布局的控制，脱离文档流，另起一层相对于祖先中第一个定位元素（也就是position!=static的元素），进行定位
4 position: fixed , 相对于浏览器视口定位，视觉窗口，比如浏览器广告，回到首页按钮等

css定位，z-index属性指定

指定了堆叠顺序，堆叠属性在上面的会覆盖下面的但是比较两个元素的z-index时，不能直接比较数值的大小，要注意这两个z-index要在同一个层叠上下文。

浏览器的渲染过程

1，根据html构建html树（DOM）
2，根据css构建css树（CSSOM）
3，将两棵树合成一棵渲染书
4，Layout布局
5，Paint绘制
6，Compose合成

css动画就是浏览器动态渲染的过程，动态进行layout/panint/compose 一个或者几个步骤

css动画之transform

1，父元素上，transition: all 1s linear; /all表示所有属性都过渡，1s表示动画时间，linear表示匀速/
2，子元素上，也就是动画元素上，transform: translateX | translateY | rotate() | scale() 等
3，动画触发，子元素被鼠标悬停

/*hover 鼠标悬停的意思*/
#demo:hover{
  transform: translateX(50px); /*X轴方向的位移动画*/
  transform: translateZ(0px); /*Z轴方向的位移动画*/
}

动画触发，还可以用js指定子元素增加一种class选择器（颜色变化动画）

#demo{
  width:100px;
  height:100px;
  border: 1px solid red;
  transition:all 4s;
  background: green;
}
#demo.end{
  width: 200px;
  height: 200px;
  background:blue;
}
button.onclick = ()=>{
  demo.classList.add("end");
}

css动画之animation

1，指定关键帧

@keyframes dxxx
{
 0%{
   transform: none;
 }
  66%{
    transform: translateX(200px);
  }
  100%{
    transform: translateX(200px) translateY(100px);
  }
}

2，指定动画

#demo.start{
  animation: dxxx 2s infinite alternate forwards;
}

3，触发动画

button.onclick = ()=>{
  demo.classList.add("start");
}

CSS 知识总结