一、CSS布局

• 什么是布局：简单来说就是把页面分成一块块。
• 布局分类：
  • 固定宽度：一般是960px/100px/1024px
  • 不固定宽度：文档流
  • 响应式布局
• 布局选择
  • 如要兼容IE9及一下版本浏览器，则用float布局
  • 如要兼容老版手机浏览器，则用flex布局
  • 如只需兼容最新版浏览器，则用grid布局

1.float布局

步骤：

1. 在子元素上加float: left;和width
2. 在父元素上加.clearfix

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

经验：

1. 最后一个子元素不设width；
2. 不需要做响应式；
3. IE6/7存在双倍margin,解决办法有：
   • 将错就错，将margin减半；
   • 加上display: inline-block;
4. 如果图片下方有空隙，可以加上vertical-align： top/middle;
5. 让元素居中可用：margin-left: auto;margin-right: auto;用来替代margin: 0 auto;避免覆盖上下边距

2.flex布局

让一个元素变成flex容器

.container{
    display: flex|inline-flex;
}

改变item流动方向（主轴）

.container{
    flex-direction: row|row-reverse|column|column-reverse;
}

改变折行

.container{
    flex-wrap: nowrap|wrap|wrap-reverse;
}

主轴对齐方向（默认横轴，除非改变flex-direction）

.container{
    justify-content: center|space-between|flex-start|flex|end|space=around|space_evenly;
}

次轴对齐方向

.container{
    align-items: center|flex-start|flex-end|stretch;
}

3.grid布局

成为container

.container{
    display: grid|inline-grid;
}

二、CSS定位

布局是屏幕平面上的，定位是垂直于屏幕的

position属性

• static默认值
• relative相对定位，升起来，不脱离文档流
• absolute绝对定位，定位基准是祖先非static
• fixed固定定位
• sticky粘滞定位

经验

• white-space: nowrap;文字内容不换行
• 层叠上下文：z-index|flex|opacity|transform

三、CSS动画

1.浏览器渲染过程

• HTML（DOM）
• CSS（CSSOM）
• 合并成渲染树（render tree）
• Layout布局（文档流、盒模型、计算大小和位置）
• Paint绘制
• Compass合成（根据层叠关系展示画面）

2.transform

• translate位移
• scale放大/缩小
• rotate旋转
• skew倾斜

3.transition

• transitionL:属性名 时长 过渡方式 延迟

4.animation

• @keyframes语法
• animation:时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名