盒子模型

盒子模型

box-sizing

  • content-box
    • 默认值
    • width=content
  • border-box
    • 旧版IE
    • width=content+padding+border

元素类型

  • inline

    • 根据content-area填充
    • 不能设置宽高
    • 只能设置左右padding、margin

  • block

    • 默认宽度100%，默认占一行
    • 可以设置宽高边距

  • inline-block

BFC

  • 内部元素如何布局定位
  • 和其他元素的关系
  • layout的基本单位
    • 块级上下文
    • 行内上下文

边距折叠

  • 元素自身的margin-bottom和margin-top相邻时也会折叠
  • 同一BFC下相邻的块元素
  • 创建BFC避免边距折叠

边距折叠的计算

  • 参加计算的margin都是正值，取margin中较大的作为计算后的值
  • 参与计算的margin都是负值，取其中绝对值较大的，然后从0开始负向位移
  • 参与计算的margin有正有负，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

创建BFC

  • body根元素
  • float不为none
  • position取值为absolute或者fixed
  • display取值为inline-block、table-cell、table-caption、flex、inline-flex
  • overflow不为visible

作用

  • 包含浮动元素
  • 用于清除浮动
  • 防止浮动元素被覆盖

定位

static

  • 默认
  • 文档流位置
  • body作为原点

    inherit 继承

    fixed

  • 默认相对于可视窗口固定
  • 祖先元素有transform，则相对改祖先元素

    absolute

  • 距离最近的非static的祖先元素开始定位
  • html作为原点

    relative

  • 相对于文档中的初始位置
  • body作为原点

flex布局

container

  • flex-grow
    • flex-direction
      • row
      • row-reverse
      • column
      • colum-reverse
    • flex-wrap
      • no-wrap
      • wrap
      • wrap-reverse
  • justify-content
    图片说明
  • align-items
    图片说明
  • align-content
    图片说明

    item

  • order
    • 排序，小的在前面
  • flex 默认flex：0 1 auto;
    • flex-grow -决定是否拉伸
    • flex-shirnk - 决定是否收缩
    • flex-basis - 与width同时出现时，覆盖width

flex的各种取值

赋三个值

.item {
    flex: 100 200 300px;
}
// 等价于
.item {
    flex-grow: 100;
    flex-shrink: 200;
    flex-basis: 300px;
}

赋值为auto

//等价于
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

赋值为none

// 等价于
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

赋值为非负数

// 该数字为 flex-grow 值，而flex-shrink 的值取 1，flex-basis 取 0%：
.item {
    flex: 1;
}
// 等价于
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

赋值为一个长度或百分比

// 将长度或百分比设为 flex-basis 值，而flex-grow 取 1，flex-shrink 取 1
.item1 {
    flex: 0%;
}
// 等价于
.item1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

优先级

权重如下

  • !important 最高
  • inline:1000
  • id:100
  • class:10
  • tag:1

预处理

增强css

  • less、sass
  • css loader

原理

  • 中间处理优化
  • 解析成css
  • 处理步骤
    • 增强css语法解析
    • css AST
    • 生成目标css

动画

四种动画

  • 合成器动画
    • 合成器自身触发，比如惯性滚动，效率非常高
    • Blink触发交给Layer Compositor处理运行（transform动画，opacity动画）
  • 非合成器动画
    • 合成器无法单独运行的transition和animation动画
    • 定时器或者requestAnimationFrame驱动的JS动画--性能最差

transition

  • 不要直接操作宽高位置属性，会导致大量回流或者重绘
  • 可以操作transform属性，transform会在合成层处理
  • 或者用opacity、filter

animation

  • animation key frame

硬件加速

原理--开启GPU加速

  • 每个层都有一个独立的Render线程
  • transformZ
  • transform3D

优化

  • will-change设置单独合成图层
  • 尽量用合成层动画
  • 减少回流重绘
  • 开启硬件加速
  • 防止JS阻塞