CSS基础

1、css样式（选择器）的优先级
计算权重的确定
!important
内联样式
后写的样式优先级高（前提是大家的权重一样)

2、雪碧图的作用
减少HTTP请求次数 提高加载性能
有一些情况下可以减少图片大小

3、自定义字体的使用场景
宣传/品牌/banner等固定文案
字体图标

4、base64的使用
用于减少HTTP请求
使用于小图片
base64的体积约为原图4/3

5、伪类和伪元素的区别
伪类表状态
伪元素是真的有元素
前者单冒号，后者双冒号

6、如何美化checkbox
label[for]和id
隐藏原生input
:checked + label

css布局

1、实现两栏（三栏）布局的方法
表格布局
float + margin布局
inline-block布局
flex布局
2、position:absoute/fixed有什么区别
前者相对最近的relative/absoute
后者相对于屏幕(viewport)
3、display:inline-block
原因：字符间距的间隙
解决： 消灭字符或者消灭间距
4、如何清除浮动
让盒子负责自己的布局
overflow:hidden(auto)
::after{clear:both}
5、如何适配移动端页面
viewport
rem/viewport/media query
设计上：隐藏、折行、自适应

css效果

1、如何用一个div画xxx
box-shadow无限投影
::after
::before
2、如何产生不占空间的边框
box-shadow
outline
3、如何实现圆形（头像）
border-radius: 50%

QQ截图20180716150305.png

5、如何实现半圆、扇形等图形
border-radius:组合
有无边框
边框粗细
圆角半径

image.png

7、如何放大、平移一个元素
transform:translateX(100px)
transform:scale(2)
8、如何实现3D效果

image.png

css动画

1、css实现动画的方式有几种
transiton
keyframes(animation)

image.png

3、如何实现逐帧动画
使用关键帧动画
补掉补间(steps)

image.png

css预处理器

常见的css预处理器有两种：

less(Node.js)
sass(Ruby有Node版本）

image.png

image.png

image.png

Bootstrap

image.png

image.png

image.png

css工程化方案

image.png

image.png

image.png

image.png

image.png

Bootstrap

image.png

image.png

image.png

总结

css学习路径
css工作应用
css面试技巧

image.png

image.png

image.png

image.png