前端八股文-CSS3篇

1.CSS3

1.1 CSS3新增特性

• 新增CSS选择器、伪类
• 特效：text-shadow、box-shadow
• 渐变：gradient
• 旋转过度：transform、transtion
• 动画：animation

1.2 盒模型

盒模型都是有四部分组成：content、padding、border、margin
最内层是content,外边是 padding,然后是 border,最外层是 margin

标准盒模型和IE盒模型(怪异盒模型)的区别在于设置width和height时，对应的范围不同

• 标准盒模型和IE盒模型的区别在于设置width和height时，对应的范围不同
  • 标准盒模型的width、height只包含了content
  • IE盒模型的width、height包含了border、margin、padding

就是说如果是标准盒模型,如果设置 width:100px padding:10px border:1px,其中 width:100px,意味着 content 是 100px,实际上这个盒子的宽度是 100+20+2=122px 宽度

如果是怪异盒模型,置 width:100px padding:10px border:1px,意味着 content 是 100-20-2=78px,三个加一起为 100px

改变盒模型的种类
通过修改元素的 box-sizing 属性来改变元素的盒模型

• box-sizeing:content-box 表示标准盒模型(默认值)
• box-sizeing:border-box 表示 IE 盒模型(怪异盒模型)

1.3 trastion和aniamtion的区别

transition 是一次性的“过渡动画”，用于状态变化时平滑过渡；
animation 是可重复的“关键帧动画”，可以自定义多个中间状态，更复杂也更灵活。

transtion：属于过度属性，强调过度，需要一个事件进行触发（如鼠标进入、离开）类似flash的补间动画，设置一个开始帧和结束帧.只能在两个状态之间切换（如从透明变为不透明）.

.box {transition: all 0.5s ease;
}
.box:hover {transform: scale(1.2);
}

aniamtion：属于动画属性，它的实现不需要触发事件，设定好后可自动执行，且可以循环播放。也是类似补间动画，但是可以设置多个关键帧

@keyframes bounce {0%   { transform: translateY(0); }50%  { transform: translateY(-100px); }100% { transform: translateY(0); }
}.box {animation: bounce 1s ease-in-out infinite;
}.box 元素上下跳动，1 秒一次，永远循环。

对比点	transition	animation
触发方式	需要事件触发（如 :hover）	可自动执行或手动触发
中间状态	只有开始和结束	可以定义多个中间帧
是否循环	❌ 不支持	✅ 支持（通过 infinite）
控制能力	简单过渡效果	更灵活强大
使用复杂度	简单易用	略复杂但功能强大
适用场景	按钮放大、透明度变更等简单状态切换	加载动画、关键帧运动、复杂交互动画

1.4 元素水平垂直居中的三种方法

方法一:

<div class="parent"><div class="child">内容</div>
</div>

.parent {    position: relative;
} .child {    position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}

解释说明:

position: absolute：子元素 .child 不再参与普通文档流，它的位置由 left 和 top 决定。
left: 50%; top: 50%;：把 子元素的左上角 移动到了父容器 .parent 的正中心。
这时候 .child 的左上角在 .parent 的正中间，元素会错位，右下角偏移。为了让元素,调整中垂直水平居中的位置,应该向上向左移动,所以负的transform: translate(-50%, -50%)
translate(-50%, -50%) 是 相对自身尺寸偏移 的操作：
向左移动 50%（自身宽度的一半）
向上移动 50%（自身高度的一半）
这就把左上角对齐中心 → 变成 整体居中

方法二:

<div class="parent"><div class="child">内容</div>
</div>

.parent {position: relative;
}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 200px;height: 100px;
}

解释说明:
✅ 第一步：四个方向都设置为 0

top: 0;
bottom: 0;
left: 0;
right: 0;- .child 会紧贴父元素的四条边；
- 换句话说：它的“定位框”与 .parent 一样大；
- top/bottom/left/right,相对于父级的位置

✅ 第二步：margin: auto

在定位元素中，如果设置了 top + bottom 和 margin-top/bottom: auto，浏览器就会尝试：
在上下方向上平均分配剩余空间，使元素居中。

✅ 第三步：固定宽高

  width: 200px;height: 100px;

如果不设定宽高，元素会默认拉伸填满整个区域（也就是 100% 宽高）；

方法三:

.parent {display: flex;justify-content: center;  /* 水平居中 */align-items: center;      /* 垂直居中 */
}

1.5 p、em、rem的区别

• px 固定像素单位，不能随其它元素的变化而变化
• em是相对于父元素的单位，会随着父元素变化而变化
• rem是相对于根元素html，它会随着html元素变化而变化

rem常用在移动端项目，设置根元素的fong-size，其它元素会随着根元素的变化而变化，从而达到不同手机屏幕的自适应大小。通常会配合postcss-pxtorem插件进行使用

1.6 如何解决1px问题

什么是 1px 问题?
在一些高清屏（尤其是移动设备）上，例如 iPhone，你设置 1px 的边框或线条，实际显示出来的比 1 像素粗，看起来像 2px 或模糊不清。

因为：
• 这些设备的屏幕是 高像素密度屏（HiDPI / Retina）
• CSS 的 1px 并不等于设备实际的物理像素
• 例如：
• iPhone 的 devicePixelRatio 是 2 或 3
• 所以 1 个 CSS 像素其实会映射为 2～3 个物理像素

如何解决?

• 设置 0.5px
• 使用伪元素 + transform

利用缩放来压缩元素达到视觉上的“0.5px”效果。

.divider {border-top: 1px solid #ccc;transform: scaleY(0.5);transform-origin: top;
}

使用伪元素 + transform,用 ::after 创建一个缩放的 1px 元素：

.divider {position: relative;
}
.divider::after {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background-color: #ccc;transform: scaleY(0.5); /* 或 0.3333 */transform-origin: bottom;
}

🔍 border + scaleY 是整块压缩，容易影响结构；
✅ ::after + scaleY 是单独压缩线条，更可控、更推荐使用。

1.7 什么是BFC布局，如何创建BFC布局？

BFC布局为块格式化上下文（Block Formatting Context，BFC）， 是CSS布局的一个概念，里面的元素不会影响到外面的元素。

如何创建一个 BFC?

/* 最常见的方法 */
.bfc {overflow: hidden;      /* 或 auto / scroll */
}
/* 其他方式 */
.bfc {float: left;           /* 浮动元素天然形成 BFC */
}
.bfc {position: absolute;    /* 或 relative / fixed / sticky */
}
.bfc {display: inline-block; /* 也会创建 BFC */
}

BFC 的作用:

• 解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。
• 解决margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题

BFC 实例:

例子一:

<!-- 没有 BFC，父元素高度会塌陷 -->
<div class="parent"><div class="child"></div>
</div>

.parent {background: lightgray;/* ✅ 创建 BFC，解决塌陷 */overflow: hidden;
}.child {float: left;width: 100px;height: 100px;background: red;
}

没有 overflow: hidden 时，父 .parent 的高度为 0，看不到灰色背景；
加了 overflow: hidden，.parent 自动包住了浮动的 .child，高度正常。

例子二:
什么是 margin 合并（collapse）？
在块级元素中，如果一个元素的第一个子元素有 margin-top，而父元素没有 padding/border/BFC 等隔离条件时，这个 margin 会和父元素合并，看起来像是父元素有了这个 margin。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;}.outer {background: lightblue;/* overflow: hidden;  */}.inner {background: lightcoral;margin-top: 50px;}</style>
</head>
<body><div class="outer"><div class="inner">内容</div></div>
</body>
</html>

上述代码发生了 margin 合并,父元素的背景色没出来

加入 BFC 隔离

 .outer {background: lightblue;overflow: hidden;  }

1.8 link和@import的区别

特性	<link>	@import
语法位置	写在 HTML 中的 <head> 里	写在 CSS 文件中（或 <style> 标签中）
加载时机	页面加载时同步加载，不会阻塞 HTML 解析	CSS 解析时才开始加载，存在延迟，可能阻塞渲染
支持浏览器	所有主流浏览器	老旧浏览器（如 IE < 9）不支持
支持媒体查询	✅ 支持	✅ 支持
是否可嵌套	❌ 不可以嵌套引入其他样式表	✅ 可以嵌套引入其他 CSS 文件
推荐程度	✅ 推荐使用，性能更好、控制更强	⚠️ 一般不推荐，仅在 CSS 中组织样式时使用

1.9 CSS选择器优先级

!important 的权重最高，可以无视所有其他权重规则，但应避免滥用，因为它会破坏样式的自然层叠规则。

选择器类型	权重位置	举例
行内样式	a（最高）	<div style="color: red"> → 1,0,0,0
ID 选择器	b	#app → 0,1,0,0
类、伪类、属性选择器	c	.box, :hover, [type="text"] → 0,0,1,0
元素(标签)、伪元素选择器	d	div, h1, ::after → 0,0,0,1
通配符、组合符、继承	不增加权重	*, >, +, ~, 继承来的样式