rem、em 和 px、inherit 加案例

最新推荐文章于 2024-09-04 11:55:18 发布

可可鸭~

最新推荐文章于 2024-09-04 11:55:18 发布

阅读量651

点赞数 20

分类专栏：前端每日阅读简单网页设计文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_43547255/article/details/141196548

版权

前端每日阅读同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

简单网页设计

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

一、rem、em 和 px 是三种常用的 CSS 长度单位，每种单位在不同的场景下有不同的应用和效果。以下是它们的区别：

以下是它们的区别：

px (像素)
定义: px 是相对单位，表示屏幕上的一个物理像素点。它是一个固定的单位，通常不会因为父元素的属性或全局设置而变化。
应用场景: 常用于需要精确控制元素大小的场景，比如图像、边框、按钮等。
特点: 因为它是固定的单位，页面元素的大小在不同的设备和分辨率下通常保持不变。使用 px 可能会导致在某些高分辨率屏幕上元素看起来太小。
em
定义: em 是相对单位，表示相对于元素的字体大小。1em 等于当前元素的字体大小。
应用场景: 常用于相对缩放，特别是在响应式设计中。适合用于字体大小、间距、padding 和 margin 的设置。
特点: em 是基于父元素的字体大小来计算的，因此嵌套元素会继承并相对于父元素计算。多个嵌套的 em 值会叠加，从而导致复杂的计算结果。
例如，如果父元素的字体大小为 16px，2em 就等于 32px。
rem
定义: rem 是“根元素的 em”，表示相对于根元素（通常是元素）的字体大小。1rem 等于根元素的字体大小。
应用场景: 用于设计时保持一致的相对单位，避免 em 嵌套带来的复杂性。常用于全局的响应式设计。
特点: 不受父元素的影响，只受根元素（通常是）的字体大小影响。
例如，如果根元素的字体大小为 16px，2rem 就等于 32px。
总结
px 是绝对单位，通常用于需要精确和固定尺寸的元素。
em 是相对单位，基于父元素的字体大小，可以随着父元素大小变化而变化，适合做局部相对布局。
rem 也是相对单位，但它总是相对于根元素的字体大小，适合用于全局一致性布局。
实际应用中的选择
使用 rem 可以在全局设置一个基准，然后根据这个基准进行设计，适合响应式设计。
使用 em 可以根据上下文进行缩放，适合需要相对变化的元素。
使用 px 适合需要精确控制的场景，但在响应式设计中使用 px 可能会影响适应性。

二、inherit 是一个 CSS 关键字，用于继承父元素的样式属性值。当你在 CSS 中使用 inherit 时，子元素将会继承父元素相应的属性值：

让我们分别看一下你提到的属性及其使用 inherit 的效果：

font-size: inherit;
解释: 这意味着子元素的字体大小将继承自父元素的字体大小。
效果: 如果父元素的 font-size 设置为 16px，那么子元素的 font-size 也将是 16px。
应用场景: 当你希望子元素的字体大小与父元素保持一致时，使用 inherit 可以避免重复定义。
color: inherit;
解释: 子元素的文本颜色将继承父元素的文本颜色。
效果: 如果父元素的 color 设置为 #333，那么子元素的文本颜色也将是 #333。
应用场景: 在不想为子元素单独设置颜色时，可以使用 inherit 来继承父元素的颜色，保持页面设计的一致性。
line-height: inherit;
解释: 子元素的行高将继承父元素的行高。
效果: 如果父元素的 line-height 设置为 1.5，那么子元素的 line-height 也将是 1.5。
应用场景: 使用 inherit 可以确保子元素与父元素在行间距上的一致性，尤其是在处理文本布局时。
继承 inherit 的好处
一致性: 使用 inherit 可以确保子元素与父元素保持一致的样式，减少样式的重复定义。
简化管理: 如果你需要修改父元素的某个样式属性，子元素也会自动更新，从而简化了样式的管理。
可维护性: 当样式复杂时，inherit 可以让样式结构更清晰，易于维护。
注意事项
并不是所有 CSS 属性都可以继承。例如，padding、margin 等盒模型属性默认情况下是不会继承的，使用 inherit 需要谨慎。
如果没有明确指定 inherit，有些属性在默认情况下会自动继承，例如 color 和 font-family。
通过使用 inherit，你可以让子元素的样式更灵活和一致，减少代码冗余，并且使整个页面更易于维护。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* 提示框 */
    .privacy_modal {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 110;
      width: 100%;
      padding: 20px 0;
      background: #474747;
    }

    .privacy_modal_container {
      width: 1200px;
      max-width: calc(100% - 40px);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      perspective: 500px;
    }

    .privacy_modal_container p {
      font-size: 16px;
      line-height: 1.75;
      color: #fff;
      padding-right: 2em;
    }

    .privacy_modal_container p a {
      font-size: inherit;
      color: inherit;
      line-height: inherit;
      text-decoration: underline;
    }

    .privacy_modal_container button {
      flex: none;
      font-size: 16px;
      width: 12em;
      height: 3.5em;
      background: #fff;
      color: #474747;
      border-radius: 2em;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      outline: 0 !important;
      border: 0;
    }
  </style>
  <body>
    <div class="privacy_modal" id="privacy_modal">
      <div class="privacy_modal_container">
        <p>
          我们非常重视您的个人隐私，当您访问我们的网站时，请同意使用的所有cookie。有关个人数据处理的更多信息可访问<a
            href="/privacy"
            >《隐私政策》</a
          >
        </p>
        <button onclick="setCook('/Cn')">接受</button>
      </div>
    </div>
  </body>
</html>