css基础
- css是一种样式表语言，是用来描述HTML或XML的文档呈现，CSS使用最广泛的版本为CSS2.1，支持IE浏览器，目前最新版本为CSS3。
文档流
-
流动方向
1.inline元素从左到右，到达最右边开始换行；
2.block元素从上到下，每一个都另起一行；
3.inline-block元素结合前两个的特点，从左到右，但是单个元素不会跨行。
-
宽度
1.inline元素的宽度为内部各元素的宽度和，不可以用width指定。
2.block元素自动计算宽度，可用width指定。
3.inline-block结合前两者的特点可用width指定。
-
高度
1.inline的高度由line-height间接决定，跟height无关。
2.bloc高度由内部文档流元素决定，可设height。
3.inline-block和block类似可设。height。
overflow溢出
- 当内容宽度或高度大于容器时，会产生溢出的现象，此时可用overflow来设置是否显示滚动条；属性值为auto灵活设置，scroll永远显示，hidden直接隐藏溢出的部分，visible直接显示溢出的部分。还可设置overflow-x和overflow-y。
脱离文档流
- 使用float元素
- position:absolute/fixde元素
两种盒模型
- content-box:内容盒-内容就是盒子的边界。即content-box width=内容宽度。
- border-box：边框盒-边框才是盒子的边界。即boeder-box width=内容宽度+padding+border。
- 一般使用border-box
css布局
-
float布局（不要在手机上使用此布局方式）
1.子元素加float:left和width
2.父元素加.clearfix。 style样式如下
.clearfix:after{ content: ""; display: block; clear: both; } -
flext布局
推荐flex小游戏 flexboxfroggy.com/
-
grid布局
推荐flex小游戏 flexboxfroggy.com/
css动画
-
渲染过程
1.根据HTML构建HTML树（DOM）
2.根据CSS构建CSS树（CSSOM）
3.将两棵树合并成一棵渲染树（render tree）
4.Layout 布局（文档流、盒模型、计算大小和位置）
5.Paint 绘制（把边框颜色、文字颜色、阴影等画出来）
6.Composite 合成 （根据层叠关系展示画面）
-
三种更新方式
-
关于transform/transition/animation建议看MDN文档更全面
-
transform常用的四个功能（一般配合transition过渡，inline元素不支持transform,需变成block）
1，translate 位移；2，scale 缩放；3，rotate 旋转； 4，skew 倾斜。
transform:scale(0.5) translate(100% 20%) transform:none /*取消所有*/ -
transition 过度（补充中间帧）
1.语法
transition:属性名 时长 过度方式 延迟
transition:left 200ms linear 3s /*可以用逗号分隔两个不同属性*/可以用all代替所有属性
transition:all 200ms过度方式有：linear / ease /ease-in /ease-out / ease-in-out等。 注意：并不是所有的属性都能过度
display:none=>block没法过度 一般改成visibility:hidden=>visible -
animation(关键帧+动画)
@Keyframes完整语法
@Keyframes xxx{ 0% {top:0 ; left:0;} 30% {top:50 ; left:50;} 68%,72% {left:50%} 100% {top:100% ; left:100%;} } -
animation缩写语法
animation:时长|过度方式|延迟|次数|方向|填充模式|是否暂停|动画名； 时长：1s或1000ms 过度方式：和transition取值一样如linear 次数：3或2.4或者infinite 方向：reverse|alternate|alternate-reverse 填充模式：none|forwards|backwards|both 是否暂停：paused|running 以上所有属性都有对应的单独属性
