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%
5、如何实现半圆、扇形等图形
border-radius:组合
有无边框
边框粗细
圆角半径
7、如何放大、平移一个元素
transform:translateX(100px)
transform:scale(2)
8、如何实现3D效果
css动画
1、css实现动画的方式有几种
transiton
keyframes(animation)
3、如何实现逐帧动画
使用关键帧动画
补掉补间(steps)
css预处理器
常见的css预处理器有两种:
less(Node.js)
sass(Ruby有Node版本)
Bootstrap
css工程化方案
Bootstrap
总结
css学习路径
css工作应用
css面试技巧