CSS中高频八股

CSS的题目很多，这里只列举了重点的中高频，真题，字节题

此处记录个人笔记，一些AI拓展阅读可以到网站笔记上进行阅读 飞书文档思维导图

重点

1.CSS盒模型是什么？包含哪些部分？

八股链接 MDN-盒模型 CSS盒模型定义了一个元素在页面中所占据空间的模型，包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）。盒模型的尺寸计算方式可以通过 box-sizing 属性进行控制。默认值为 content-box，此时 width 和 height 属性仅作用于 content 区域，元素实际占据的宽度和高度是 content + padding + border 的总和。当设置为 border-box 时，width 和 height 属性将包括 content、padding 和 border，即直接决定整个盒子的最终宽高，这在实际布局中更为直观和方便。

2.讲述一下伪类和伪元素的区别。

八股链接 MDN-伪类和伪元素

1. 伪类，是css选择器的一种，可以选择处于特定状态的元素，语法是冒号开头的关键字。伪类可以分为简单伪类（比如:first-child）和用户行为伪类(:hover)
2. 伪元素，用于选取某个元素的特定部分或创建一个虚拟的元素,语法是双冒号开头的关键字,虚拟元素不会改变实际的DOM结构 二者可以结合使用

3.transition和animation的区别

八股链接 15分钟学会css动画(第1节 transform) 15分钟学会css动画(第2节 transition) 15分钟学会css动画(第3节 animation和keyframes) MDN-transition MDN-animation Transition用于实现从一个状态到另一个状态的过渡效果

animation则是通过定义一些keyframe，实现关键帧动画效果

这里面有一些有趣的知识点比如timing function，贝赛尔函数，线性函数之类的可以了解一下

4.position 的值有哪些？

八股链接 MDN-postion 你真的会用sticky了吗？5分钟彻底搞懂 postion的值有以下几种

1. static：默认值，元素按正常的文档流计算位置
2. relative：相对定位，元素不脱离文档流，但是按照其原先的位置进行偏移
3. absolute：绝对定位，元素脱离文档流，并且相对于其最近的非static祖先元素的位置进行偏移

当你使用 position: absolute 定位一个元素时，如果在它的祖先元素中找不到任何非 static（即 relative, absolute, fixed, 或 sticky）定位的元素，那么这个绝对定位的元素将会相对于 初始包含块（Initial Containing Block, ICB） 进行定位。在大多数情况下，ICB 就是视口（viewport），即浏览器窗口的可视区域。

4. fixed,脱离文档流，相对于viewport（视口）来定位
5. sticky，综合relative和fixed的特性，元素在跨越特定阈值前为相对定位，之后为固定定位

5.三栏布局的实现

八股链接

1. 使用flex: flex: 1; flex:2;flex:1
2. 使用grid: 1fr;1fr;1fr

意义不大

CSS中可继承与不可继承属性有哪些

八股链接

1. 文本相关，表格、列表相关的都可继承
2. 盒模型，背景，定位等不继承

如何实现元素的水平垂直居中？给出几种方法。

八股链接

有意思的题目

如何用 CSS 实现一个三角形

八股链接 利用border的特性 # 面试官：请用CSS画一个三角形出来

字节题（上面没有的）

如何实现一个响应式布局？

八股链接

用CSS实现一个扇形

八股链接 也是利用边框的特性，在画三角形的基础上，把边框设置成圆的就行

其余真题

display:none和visibility:hidden的区别是 ？

八股链接

• display:none直接移除了元素，它的子元素也会被相应移除，触发回流
• visiblility:hidden:只是设置不可见，不会移除元素，仍然保持其位置和空间，触发重绘

vw、vh 是什么？

八股链接 MDN-CSS 值和单位

• vw（viewport width）：
  1vw = 视口宽度的 1%，即视口宽度的百分之一。
  例如：视口宽度为 1000px，则 1vw = 10px。

• vh（viewport height）：
  1vh = 视口高度的 1%，即视口高度的百分之一。
  例如：视口高度为 800px，则 1vh = 8px。

• 应用场景：

  • 创建全屏元素（如 height: 100vh）
  • 响应式字体大小（如 font-size: 5vw）
  • 动态比例布局、动画等

---

单位	说明	示例
px	固定像素单位	font-size: 16px
em	相对于当前元素字体大小	font-size: 1.5em
rem	相对于根元素（html）字体大小	font-size: 1.2rem
vw	相对于视口宽度	width: 50vw
vh	相对于视口高度	height: 100vh
vmin	相对于视口宽高的较小值	width: 50vmin
vmax	相对于视口宽高的较大值	width: 50vmax
lh	相对于当前行高	padding-top: 1lh
ch	相对于字符 "0" 的宽度	width: 20ch
%	相对于父元素尺寸	width: 50%

详细说明CSS3新特性 ？

八股链接 MDN-cal() MDN-var() MDN-自定义属性（--*）：CSS 变量