问题

实现两栏、三栏布局

position的absolute和fixed的区别？

• absolute相对最近的元素的absolute或者relative
• fixed相对于屏幕（viewport）

display:inline-block为什么会有间隙？

• 字符间距
• 解决

浮动的意义

为了解决文字环绕图片

如何清除浮动？

• 为什么要清除浮动？
  • 浮动元素是脱离文档流的，不会占据父元素的布局空间，那么浮动元素超出父元素后会对其他元素产生影响
• 解决
  • 让盒子负责自己的布局（overflow:hidden; / overflow:auto;）
  • 添加伪元素
  • 投机取巧：<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿
  • overflow+zoom：.fix{overflow:hidden; zoom:1;}
  • after+zoom：.fix{zoom:1;} .fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

    ie中：使元素hasLayout，如宽度值，高度值，绝对定位，zoom，浮动本身 非ie浏览器：overflow属性

css边框

• border
• box-shadow 不占空间的边框
• outline

如何实现IOS圆角？

图标改为svg，然后clip-path: (svg)

如何实现3D效果？

• perspective：500px（观察者与z=0的距离，产生透视效果）
• transform-style: preserve-3d
• transform: translate rotate

css动画实现方式几种？

• transition
• keyframes（animation）

过渡动画和关键帧动画区别？

• 过渡动画需要有状态变化，关键帧动画没有
• 关键帧动画控制更精细

逐帧动画怎么做？

• 使用关键帧动画
• 去掉补间（steps）

css动画性能

• 性能不坏
• 某些情况下css性能好
• js可以更加精细的控制

宽高比

• padding-top: calc((9 / 16) * 100%);
• aspect-ratio: 16 / 9;

  <div class="container">
  <div class="box"></div>
  </div>
  <style>
  .container {
    width: 720px;
  }
  .box {
    padding-top: calc((9 / 16) * 100%);
    aspect-ratio: 9 / 16;
    background: #efefef;
  }
  </style>

css预处理器

https://blog.csdn.net/pedrojuliet/article/details/72887490
sass：变量$开头，冒号隔开
less：变量@开头，冒号隔开
stylus：

• 可以不包含花括号，分号，冒号
• 以$开头，或者任何的字符，不能用@开头

嵌套
颜色函数

// sass
lighten($color, 10%); 
darken($color, 10%);  
saturate($color, 10%);   
desaturate($color, 10%);
grayscale($color);  
complement($color); 
invert($color); 
mix($color1, $color2, 50%); 
// less
lighten(@color, 10%); 
darken(@color, 10%);  
saturate(@color, 10%);  
desaturate(@color, 10%); 
spin(@color, 10); 
spin(@color, -10); 
mix(@color1, @color2);
// stylus
lighten(color, 10%); 
darken(color, 10%);  
saturate(color, 10%);  
desaturate(color, 10%);

Mixins混入