css面试题汇总
# CSS
谈谈你对 BFC 的理解，（什么是 BFC，BFC 有什么作用，BFC 的约束规则，如何形成 BFC，BFC 可以解决的问题）
说说你对盒子模型的理解，简述 box-sizing 属性的使用场景
css 选择器有哪些？优先级？哪些属性可以继承？
display:none;visibility:hidden;opacity:0;之间的区别 https://www.cnblogs.com/wslsg/p/12868956.html (opens new window)
说说 em/px/rem/vh/vw 区别，如果窗口尺寸调整，vw，vh 会产生变化吗
说说设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？
position 有哪些值，作用分别是什么
CSS 样式隔离手段
行内元素、块级元素有哪些，区别是什么
CSS3 有哪些新特性
如何实现单行／多行文本溢出的省略样式？
如何使用 css 完成视差滚动效果?
让 Chrome 支持小于 12px 的文字方式有哪些？区别？
说说对 Css 预编语言的理解？有哪些区别?
css 的渲染层合成是什么 浏览器如何创建新的渲染层
css 怎么开启硬件加速(GPU 加速)
CSS 有哪些样式可以给子元素继承
font-size 和 border 可以被继承吗
CSS 引入的方式有哪些? link 和@import 的区别是?
css 实现图片自适应宽高
lineheight 属性 1.5 和 150%区别
如果子元素不能 100%继承高度，怎么实现撑满？
css filter 是什么
CSS3 如何实现渐变色？
什么情况下 z-index 不生效？
shadow dom 是什么
- 条件 hack、属性级 hack、选择符级 hack
- 实现一个 css 框架你有什么思路吗
- position 属性有哪些值，分别有什么含义
- css 实现自适应的正方形
- 两种以上方式实现已知或者未知宽度的垂直水平居中
- CSS 中几种垂直水平居中的方式
- 说说 svg 和 canvas 各自的优缺点？
- 分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。
- 介绍下 BFC 及其应用
# CSS 布局问题
双飞翼/圣杯布局，圣杯布局的几种实现方式
介绍一下 grid 网格布局
左侧固定 + 右侧自适应布局？说说几种方案？
栅格布局的原理
浮动布局和 flex 布局相比有什么优缺点
上中下三个元素，如何上下两个元素固定高度，如何撑满屏幕
# css 高级（追问）
简述 CSS 有哪些上下文类型？
# flex 布局
简述 Flex 布局的原理和使用场景
老的安卓机型不支持新版 flex 规范，如何去做兼容
除了 flex 做响应式布局，还有别的方案吗
flex:1 是什么含义？flex-shrink 默认值是几？剩余空间的分配规则是怎样的？
父 div 宽度 1000px，a,b 两个子 div 宽度 100px,a 的 flex:1,b 的 flex:2,分配规则是怎样的？
flex 是哪几个属性的简写？
介绍一下 flex 的各个属性，以及原理
flex 布局和其他布局区别
# 什么是重绘和重排，怎么减少
重绘和回流是什么
怎么引起重绘和重排
单纯改变样式会引起重排吗，比如 padding 和 margin
哪些样式改变会引起重绘，哪些会引起重排
所有样式改变都会引起重排吗
缩小元素怎么不引起重排，比如 10px _ 10px 变 5px _ 5px；
translateX 会引起回流重绘吗
transform 会造成回流吗
查询 css 属性的时候会触发重排么 ？
用 clientTop 和 clinetLeft 为什么会导致浏览器重排？
# CSS 浮动
解释下浮动和它的工作原理？清除浮动的技巧
- 浮动元素会造成什么影响，怎么清除浮动，比较好的是哪一种?，原理是什么
# CSS 动画
transition 和 animation 的区别？animate 如何停留在最后一帧!
css3 动画有哪些？
CSS 的 transform 有哪些属性，如何实现一个 div 既平移又变色？transform 的矩阵有了解过么
用 css 写无限循环动画
# CSS 手写
CSS 实现一个扇形
用 css 实现一个 Tooltip：界面上有一个 Button，鼠标 hover 上去后会在 Button 上方显示一个 tooltip，这个 tooltip 有圆角，下方有一个小三角形
css: 图片自适应撑满容器，但不改变比例
css: 容器自适应宽高，但比例不变
用 css3 写一个环形进度条
手写一些半圆，园、三角形、梯形...（注意是手写出来类似这种，三角形原理[伪类也可以实现三角形]必懂）
css 怎么实现列表中隔一行变一个颜色
parent 元素宽高不定，实现 scale 固定宽高比始终为 4：3
# less&sass
谈谈 css 预处理器机制
sass、less 用了那些特性，这两个有什么区别，怎么自己封装样式库
less 的 & 代表什么？