Skip to content

不正经的前端 | 八股

Main Navigation

快速了解

参与共建

语言

框架 & 库

其他

模式

Sidebar Navigation

基础 · 4

CSS 加载方式有几种？

@import 有什么作用？如何使用？

@charset、@layer 有什么作用？

导入 CSS 时 link 和 @import 区别？

选择器 · 7

CSS 选择器常见的有几种？

id 选择器和 class 选择器的使用场景分别是什么？

伪类选择器有哪些？

伪元素和伪类的区别？

CSS 中是否存在父选择器？如何通过子元素选取父元素？

选择器的优先级是如何计算的？

浏览器是怎样解析 CSS 选择器的？

结构&层叠 · 2

什么是 CSS 继承？哪些属性能继承，哪些不能？

CSS 中各个元素的层叠顺序？

值&单位 · 3

有没有使用过视网膜分辨率的图形？当中使用什么技术？

px，em，rem，vw 有什么区别？使用场景？

什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？

字体&文本 · 4

简述字体图标的原理

浏览器中为什么建议使用偶数大小的字体?

如何让浏览器显示小于 12px 的文字？

让页面里的字体变清晰，变细用CSS怎么做？

视觉格式化 · 8

IE 盒模型和 W3C 盒模型有什么区别?

在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？父子外边距合并的范例？

line-height: 2; 和 line-height: 200%; 有什么区别?

行内元素的边框、边界等 '框属性' 是由 font-size 还是 line-height 控制？

height=line-height 可以用来垂直居中单行文本？代码怎么实现？

inline-block 有什么特性？实际应用场景？

如何去除两个按钮中间的缝隙问题？

一个页面有一排高度不一样的产品图，这时如果我们用 inline-block ，怎样使他们顶端对齐？

盒子 · 7

CSS 盒模型？

BFC 是什么？如何构成 BFC？BFC 有什么作用？

CSS 中隐藏元素的方法有哪些？有什么区别？

文本溢出加 ... 如何实现？

如何在页面上实现一个圆形的可点击区域？

margin 什么时候会无效？

margin 重叠问题?

浮动 · 3

浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？

为什么需要清除浮动？清除浮动的方式？

clear 属性清除浮动的原理？

定位 · 5

postion 有什么属性，static是什么? static 在文档流里吗?

有几种定位方式？分别是如何实现定位的？参考点是什么？使用场景是什么？

absolute 与 fixed 区别？

z-index 有什么作用？如何使用？

z-index 属性在什么情况下会失效？

布局 · 9

flex 布局和 grid 布局区别？

flex: 1 代表的含义是什么？

CSS 如何实现瀑布流布局？

如何让块级元素水平居中？如何让行内元素水平居中？如何让 inline-block 元素水平居中？

垂直上下居中的办法？

如何实现垂直居中？

为什么 margin:auto 无法实现垂直居中?

为什么图片使用 margin:auto 不能水平居中？

响应式布局原理？

浏览器 · 5

IE6、7 的 Hack 写法是？

列举常见浏览器兼容性问题及处理范例？

CSS Reset 和 Normalize.css 有什么区别？

CSS 预编译器是什么？后编译器（PostCSS）是什么？

CSS 预处理器的比较：Less、Sass？

其他 · 10

列举你了解的 HTML5、CSS3 新特性？

可以通过哪些方法优化 CSS3 Animation 渲染？

列举 CSS 编码规范？