🎋 Hi from dodola

最近的笔记

前端八股文小题 HTML + CSS

8分钟阅读

Featured

HTML 相关

CSS 相关

长度单位 px、em 和 rem 的区别是什么？

这三者的区别在于它们所依据的参考基准不同。

1. px (像素)

  • 定义：绝对单位。1px 代表屏幕上的一个物理像素点。
  • 特点：
    • 固定值：无论父元素或根元素如何设置，10px  就永远是  10px。
    • 精确控制：非常适合需要精确尺寸的场景，例如边框宽度、图标大小等。
    • 不灵活：在响应式设计中，完全使用 px 会使得字体和布局难以随屏幕大小或用户设置而自适应调整。

示例：

.element {
	font-size: 16px; /_ 永远显示为 16 像素 _/
	padding: 10px; /_ 永远显示为 10 像素 _/
}

2. em

  • 定义：相对单位。它的值不是固定的，而是相对于当前元素的直接父元素的字体大小。
  • 计算规则：
    • 如果当前元素设置了  font-size，1em  就等于父元素的  font-size  值。
    • 如果当前元素没有设置  font-size，则会一直向上继承，最终相对于根元素的  font-size。
    • 注意：当 em 用于非  font-size  属性（如  width, margin, padding）时，它是相对于当前元素本身的  font-size。
  • 特点：
    • 继承性：具有层级关系，会受到所有父级元素字体大小的影响。
    • 适合局部缩放：非常适合用于组件内部的相对缩放。例如，在一个模块内，希望行高和边距都与模块的字体大小成比例。

示例：
假设父元素  <div class="parent">  的  font-size  为  20px。

.parent {
	font-size: 20px;
}
 
.child {
	font-size: 1.5em; /_ 计算为 20px _ 1.5 = 30px _/
	margin: 2em; /_ 计算为 30px _ 2 = 60px (相对于自身的 font-size) _/
	padding: 0.5em; /_ 计算为 30px _ 0.5 = 15px (相对于自身的 font-size) \*/
}

3. rem (Root Em)

  • 定义：相对单位。它的值相对于文档的根元素（通常是  <html>）  的字体大小。
  • 计算规则：
    • 1rem = <html>  元素的  font-size  值。
    • 默认情况下，浏览器的根元素字体大小通常是  16px，所以  1rem = 16px。
  • 特点：
    • 一致性：避免了 em 的多层嵌套问题，整个页面中的  1rem  在任何地方都是相同的大小。
    • 易于控制和缩放：只需改变  <html>  元素的  font-size，整个使用 rem 的布局都会按比例缩放。这使得实现响应式布局变得非常简单。
    • 可访问性：尊重用户的浏览器默认字体设置。如果用户放大了浏览器字体，整个布局也能良好地适配。

示例：
设置根元素字体大小为  10px（方便计算，1.6rem  就是  16px），然后定义一个卡片。

 
html {
	font-size: 10px; /* 1rem = 10px */
}
 
.card {
	font-size: 1.6rem; /* 计算为 16px *_*/
	padding: 2rem; /*_* 计算为 20px *_*/
	margin: 1rem; /*_* 计算为 10px *_*/
}
/* 即使.card 在另一个 font-size 为 20px 的父元素中，它的 rem 值依然只参考 html 的字体大小 */

总结与对比

特性pxemrem
参考基准设备像素父元素的  font-size根元素(<html>)  的  font-size
继承性无有，受多层父元素影响无，只受根元素影响
计算复杂度简单，固定值复杂，需要关注上下文层级简单，全局统一
适用场景边框、固定大小的图标组件内部、与父元素字体成比例的元素全局布局、间距、字体，响应式设计
响应式差中等（需管理好层级）优秀（只需修改根字体大小）

如何选择？

  1. 使用  rem：用于大多数情况，特别是布局、边距、内边距和字体大小。这能确保整个设计的一致性并简化响应式开发。

  2. 使用  em：用于需要与其直接上下文（父元素字体大小）紧密相关的设计。例如：

    • 按钮的内边距和大小相对于按钮的字体大小。
    • 在一个标题旁边的小图标，其大小相对于标题的字体。
    • 实现文本缩进或某些特定比例的效果。

  3. 使用  px：用于绝对不应该被缩放的元素。最常见的就是  border（边框）、box-shadow（盒阴影）以及一些固定大小的图片或图标。

最佳实践：很多开发者会将根元素 (html) 的  font-size  设置为  62.5%（因为浏览器默认通常是  16px，16px * 0.625 = 10px）。这样之后，1rem  就等于  10px，1.6rem  就等于  16px，计算起来非常直观方便。

CSS 选择器优先级计算规则

CSS 选择器优先级通过权重系统计算，权重由四个组成部分（a, b, c, d）表示：

优先级权重组成

  • a: 是否使用内联样式（1 或 0）
  • b: ID 选择器的数量
  • c: 类选择器、属性选择器和伪类的数量
  • d: 元素选择器和伪元素的数量

优先级比较规则

  1. 从左到右比较：先比较 a，如果相等再比较 b，以此类推
  2. 数值越大优先级越高：如 1-0-0 > 0-2-0-0
  3. 相同权重后定义生效：如果权重完全相同，后定义的样式覆盖先定义的

优先级等级（从高到低）

  1. !important 声明（不属于选择器权重，但影响优先级）
  2. 内联样式（权重：1-0-0-0）
  3. ID 选择器（权重：0-1-0-0）
  4. 类/属性/伪类选择器（权重：0-0-1-0）
  5. 元素/伪元素选择器（权重：0-0-0-1）
  6. 通配符/继承样式（权重：0-0-0-0）

权重计算示例

/* 权重: 0-0-0-1 */
p { color: black; }
 
/* 权重: 0-0-1-0 */
.text { color: blue; }
 
/* 权重: 0-0-1-1 */
p.text { color: green; }
 
/* 权重: 0-1-0-0 */
#header { color: red; }
 
/* 权重: 0-1-1-1 */
#header p.text { color: purple; }
 
/* 权重: 1-0-0-0 (内联样式) */
<p style="color: orange;">内容</p>

强制覆盖样式的方法和优先级

关系图谱