css

BFC（格式化上下文）

• 文档流
  • 定位流
    • 元素的属性position为absolute或fixed，它就是一个绝对定位元素，绝对定位布局中，元素会整体脱离普通流
  • 浮动流
    • 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动方向，向左或者向右偏移
  • 普通流
    • 元素按照其在html中的先后位置至少而下布局，行内元素水平排列，块级元素则会渲染为完整的新行
• BFC概念
  • 具有BFC特性的元素可以看作是隔离了的独立容器，容器里的元素不会在布局上影响到外面的元素
• BFC的触发方式
  • 根元素
  • 浮动元素
  • overflow 值不为visible，即为auto、scroll、hidden
  • display
  • 绝对定位元素：position值为fixed、absolute
• BFC特性
  • 同一BFC的相邻块级元素会导致外边距折叠
  • 计算BFC的高度时，浮动元素也会参与计算
  • 浮动盒子的区域不会BFC重叠
• 应用
  • 自适应两列布局
    • 将左列设为左浮动，将自身高度塌陷，使得其它块元素可以和它占据同一行的位置
    • 右列为div块元素，利用自身流特性，占满整行
    • 右列设置overflow：hidden，触发BFC特性，使其自身与左列的浮动元素隔离开，不占满整行
  • 防止外边距折叠
  • 清除浮动元素解决父元素高度塌陷

盒模型

• 普通盒模型content不包含padding，而ie盒模型content包含padding盒border
• 普通盒模型
  • content
  • padding
  • border
  • margin
• ie盒模型
  • content
    • content
    • padding
    • border
  • margin

flex布局

• 在flex中默认存在两个轴，水平主轴和垂直的交叉轴，采用flex布局的元素被称为容器，在flex布局中的子元素称为项目
• 容器属性
  • flex-direction 主轴方向
    • row 默认值，水平从左向右
    • row-reserve 水平从右向左
    • column 垂直方向，从上向下
    • column 垂直方向，从下向上
  • flex-warp 项目中的容器一行放不下时的处理方式
    • nowwarp 不换行，强制一行显示
    • wrap 正常换行，第一个位于第一行第一个
    • wrap-reserve 向上换行，第一行位于下方
  • justify-content 设置元素的对齐方式
    • flex-start 默认值，左对齐
    • center 居中对齐
    • flex-end 右对齐
    • space-bettewn 两端对齐
  • align-items 设置元素在交叉轴上的对齐方式
    • flex-start 交叉轴的起点对齐
    • flex-end 交叉轴的终点对齐
    • center 交叉轴居中对齐
    • strech 默认值，项目未设置高度或者高度auto，将占满整个容器的高度
• 项目属性
  • order 定义项目的排列顺序
  • flex-grow 属性定义项目的放大比例 默认0
  • flex-shrink 属性定义项目的缩小比例 默认1
  • flex-basis 属性定义在分配多余空间时，项目占据的主轴空间
  • flex 属性时flex-grow flex-shrink flex-basis的缩写，默认为0 1 auto
  • align-self 属性允许单个项目有与其它项目不同的对齐方式，可覆盖align-items属性

css工程化

• 随着前端业务复杂度提高，前端工程对css要求
  • 希望优化css文件的目录结构，对现有的css文件实现复用
  • 希望能写出结构清晰、简明易懂的css，需要它具有一目了然的嵌套层级关系
  • 希望它具有变量特征、计算能力等更强的可编程性
  • 提高css代码的可维护性
• 预处理器：less、sass等
  • 预处理器支持我们写一种类似css，但实际上不是css的语言，然后把它编译成css代码
  • 特性
    • 嵌套代码能力，通过嵌套反映不同css属性之间的层级关系
    • 支持定义css变量
    • 提供计算函数
    • 支持将css文件模块化，实现复用
• 后处理器postCss
  • 常用来给css属性添加浏览器私有前缀，解决浏览器兼容性问题
• webpack处理css
  • webpack操作css需要使用两个loader：css-loader和style-loader
    • css-loader 倒入css模块，对css代码进行编译处理
    • style-loader 创建style标签，把css内容写入标签

transition和animation的区别

• transition是过度属性，它的实现需要触发一个事件（比如移入鼠标、点击）才执行动画，只有一个开始关键帧和介绍关键帧
• animation是动画属性，它的实现不需要触发事件，设定好时间后自动执行，且可以循环一个动画，它可以设置多个关键帧（使用@keyframe定义）完成动画

css垂直居中对齐

• absolute+margin实现

.box{
    position: relative;
}
// 方式一
.contain{
    position: abolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}
// 方式二
.contain{
    position: abolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
}

• absolute + calc

.box{
    position: relative;
}
.contain{
    position: absolute;
    width: 100px;
    height: 100px;
    top: calc(50%-50px);
    left: calc(50%-50px);
}

• flex布局

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

手动写动画，最小时间间隔是多少

多数显示器默认频率是60hz，即1s刷新60次，所以理论上最小间隔为1/60*1000ms = 16.7ms

javascript