CSS基础复习第六天：从em、rem到px，像素之差，道里不同！

三种单位，量度不同：

em：父辈参照，局部调节

• em：em是相对单位，相对于父盒子的字体大小。这意味着，当父盒子的字体大小改变时，em的值也会相应改变。
• 举个例子，如果父盒子的字体大小设置为16px，那么1em就等于16px。如果父盒子的字体大小更改为20px，那么1em就等于20px。
• 实际应用中，em通常用于调节子元素的字体大小或其他尺寸。这样，当父元素的字体大小改变时，子元素的尺寸也会相应地改变，从而保持良好的页面布局和可读性。

rem：根系相连，全局统一

• rem：rem也是相对单位，但它相对于根元素(html)的字体大小。这意味着，当根元素的字体大小改变时，rem的值也会相应改变。
• 与em不同，rem的值不受父元素字体大小的影响。这使得rem非常适合用于控制整个页面的字体大小和元素尺寸。
• 举个例子，如果根元素的字体大小设置为16px，那么1rem就等于16px。即使父元素的字体大小改变，1rem的值也不会改变。
• rem常被用于设置根元素的字体大小，从而影响整个页面的字体大小和元素尺寸。这样，当需要更改整个页面的字体大小时，只需要更改根元素的字体大小即可，而不用逐个更改所有元素的尺寸。

px：像素之实，固定不变

• px：px是绝对单位，它等于一个屏幕像素的大小。这意味着，px的值是固定的，不受其他元素字体大小或页面缩放的影响。
• px通常用于控制元素的确切尺寸，例如按钮的宽度、图片的高度等。由于px是绝对单位，因此它可以确保元素在任何设备上都显示为相同的大小。
• 实际应用中，px通常用于控制元素的具体尺寸和位置，例如按钮的宽度和高度、图片的大小和位置等。由于px是绝对单位，因此它可以确保这些元素在任何设备上都显示为相同的大小和位置。

选择单位，权衡之道：

em：灵活性为王，适应而变

• 当您希望元素的尺寸相对于父元素的字体大小成比例变化时，可以使用em。这样可以确保子元素始终与父元素保持协调一致。
• 举个例子，如果您希望段落的字体大小相对于正文的字体大小成比例变化，那么可以使用em来设置段落的字体大小。这样，当正文的字体大小改变时，段落的字体大小也会相应地改变。

rem：全局把控，统一协调

• 当您希望元素的尺寸相对于整个页面的字体大小成比例变化时，可以使用rem。这样可以确保整个页面的元素尺寸始终保持协调一致。
• 举个例子，如果您希望侧边栏的宽度相对于整个页面的字体大小成比例变化，那么可以使用rem来设置侧边栏的宽度。这样，当整个页面的字体大小改变时，侧边栏的宽度也会相应地改变。

px：精确掌控，一寸一厘

• 当您需要控制元素的确切尺寸时，可以使用px。这样可以确保元素在任何设备上都显示为相同的大小。
• 举个例子，如果您希望按钮的宽度为100px，那么可以使用px来设置按钮的宽度。这样，无论用户使用哪种设备，按钮的宽度始终都是100px。

扬长避短，恰当运用：

• em和rem都是相对单位，但它们相对于不同的元素。em相对于父元素的字体大小，而rem相对于根元素(html)的字体大小。
• px是绝对单位，它等于一个屏幕像素的大小。
• 在实际应用中，em通常用于调节子元素的字体大小或其他尺寸，rem通常用于控制整个页面的字体大小和元素尺寸，而px通常用于控制元素的具体尺寸和位置。
• 了解这三种单位的差异，并根据具体情况选择合适的单位，可以帮助您更有效地设计和开发网页，打造出美观且易用的用户界面。