像素和百分比
在CSS中，百分比和像素是两种常用的长度单位，它们在布局和样式设计中扮演着不同的角色。
- 像素（px）：像素是一种绝对长度单位，表示屏幕上的一个小点。它是最常用的长度单位，用于定义元素的宽度、高度、边距、填充等。例如，width: 100px; 表示元素的宽度为100个像素点。
- 百分比（%）：百分比是一种相对长度单位，表示相对于其父元素的某个属性的百分比。例如，width: 50%; 表示元素的宽度为其父元素宽度的50%。百分比单位在响应式设计中非常有用，因为它允许元素的大小根据其父元素的大小动态调整。
<link rel="stylesheet" href="./styles.css" >
<style>
.fifty-percent {
width: 50%;
}
.one-hundred-pixels {
width: 100px;
}
</style>
<body>
<div class="box fifty-percent">50%</div>
<div class="box one-hundred-pixels">100ppx</div>
<hr />
<div class="parent">
<div class="box fifty-percent">50%</div>
<div class="box one-hundred-pixels">100px</div>
</div>
</body>vw 和 vh
vw 和 vh 是 CSS3 中基于视口（Viewport）的单位，用于创建响应式设计。它们允许元素的大小根据视口的宽度或高度进行调整，从而实现自适应布局。
vw（Viewport Width）：1vw 等于视口宽度的 1%。例如，如果视口宽度为 1200px，那么 1vw 就等于 12px。这意味着，如果你设置一个元素的宽度为 50vw，它的宽度将是视口宽度的 50%。vh（Viewport Height）：1vh 等于视口高度的 1%。例如，如果视口高度为 900px，那么 1vh 就等于 9px。这意味着，如果你设置一个元素的高度为 50vh，它的高度将是视口高度的 50%。
<link rel="stylesheet" href="./styles.css" >
<style>
.fifty-percent {
width: 50%;
}
.fifty-vw {
width: 50vw;
}
.twenty-five-vh {
height: 25vh;
}
</style>
<body>
<div class="box fifty-percent">50%</div>
<div class="box fifty-vw">50vw</div>
<div class="box twenty-five-vh">25vh</div>
<hr />
<div class="parent">
<div class="box fifty-percent">50%</div>
<div class="box fifty-vw">50vw</div>
<div class="box twenty-five-vh">25vh</div>
</div>
</body>em 和 rem
在CSS中，em和rem是两种常用的相对长度单位，它们用于表示长度和尺寸。它们的工作方式和用途有所不同
-
em: 当em与font-size属性一起使用时，它是相对于其父元素的font-size大小。例如，如果一个元素的font-size设置为16px，那么1em就等于16px。
如果em与其他属性（如width）一起使用，它是相对于目标元素的font-size来计算的。这意味着em的值会随着父元素的font-size变化而变化，
-
rem: rem是相对于文档的根元素（通常是html元素）的font-size。这意味着rem的值不会随着父元素的font-size变化而变化，而是始终基于根元素的font-size。
在大多数浏览器中，默认的font-size是16px，所以1rem等于16px。如果用户改变了他们浏览器的默认字体大小，那么rem的值就会相应地放大或缩小。
这使得rem非常适合于创建响应式设计，因为它可以根据用户的设备或浏览器设置自动调整大小，同时保持一致性。
<link rel="stylesheet" href="./styles.css" >
<style>
.one-em {
font-size: 1em;
}
.two-em {
font-size: 2em;
}
.three-em {
font-size: 3em;
}
.one-rem {
font-size: 1rem;
}
.two-rem {
font-size: 2rem;
}
.three-rem {
font-size: 3rem;
}
</style>
<body>
<p>👇 html font-size: 16px</p>
<div class="one-em">1em</div>
<div class="two-em">2em</div>
<div class="three-em">3em</div>
<div class="one-rem">1rem</div>
<div class="two-rem">2rem</div>
<div class="three-rem">3rem</div>
<hr />
<p>👇 parent font-size: 30px</p>
<div class="parent">
<div class="one-em">1em</div>
<div class="two-em">2em</div>
<div class="three-em">3em</div>
<div class="one-rem">1rem</div>
<div class="two-rem">2rem</div>
<div class="three-rem">3rem</div>
</div>
</body>由于em的值是基于父元素的字体大小，这使得在大型项目中难以精确控制元素的大小。特别是当你需要在多个嵌套层次中精确控制元素大小时，使用em可能会变得复杂和难以管理。
比如下面的例子， 1em icon受到large类的影响， 其大小无法保持一致， 而1rem icon因为使用的是rem,其大小只受html元素的font-size影响，从而前后保持一致。
所以，rem在绝大多数情况下是一个更好的选择。
<link rel="stylesheet" href="./styles.css" >
<style>
.icon-container {
font-size: 16px;
}
.icon-container.large {
font-size: 30px;
}
.em-icon {
width: 1em;
height: 1em;
}
.rem-icon {
width: 1rem;
height: 1rem;
}
</style>
<body>
<div class="icon-container">
<div class="icon em-icon"></div>
<span class="icon-text">1em icon</span>
</div>
<div class="icon-container">
<div class="icon rem-icon"></div>
<span class="icon-text">1rem icon</span>
</div>
<div class="icon-container large">
<div class="icon em-icon"></div>
<span class="icon-text">1em icon</span>
</div>
<div class="icon-container large">
<div class="icon rem-icon"></div>
<span class="icon-text">1rem icon</span>
</div>
</body>资源
