度量单位

可用

4.1 百分比值

百分比值相对单位 在 CSS 中起着重要作用,用于创建灵活且响应的布局。它们使得元素能够适应不同屏幕尺寸和变化的条件,从而提供更好的兼容性和使用方便程度。

百分比值 用于根据其父元素的尺寸设置元素的大小。这使得布局更加灵活和适应性强。

使用 % 的示例:

CSS
.container {
  width: 80%;
  margin: 0 auto;
  background-color: #f4f4f4;
}

.box {
  width: 50%;
  padding-top: 25%; /* 比例 1:2 */
  background-color: #3498db;
  color: white;
  text-align: center;
  position: relative;
}

.box::before {
  content: "";
  display: block;
  padding-top: 50%; /* 比例 2:1 */
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 % 的示例</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div style="min-height: 200px;">
      <div class="container">
        <div class="box">内容</div>
      </div>
    </div>
  </body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 % 的示例</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <div class="box">内容</div>
    </div>
  </body>
</html>

代码解释:

  • .container:设置容器的宽度为父元素宽度的 80%,并通过 margin: 0 auto 将其居中
  • .box:设置块的宽度为容器宽度的 50%,通过 padding-top 确定块的高度,保证比例为 1:2

4.2 相对单位 (em 和 rem)

em 单位 是一个相对单位,依赖于父元素的字体大小。如果父元素的字体大小改变,em 的值也会随之改变。

使用 em 的示例:

CSS
.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* 1.5 * 16px = 24px */
  padding: 1em; /* 1 * 16px = 16px */
}

rem 单位 是一个相对单位,依赖于根元素 (html) 的字体大小。它不依赖于父元素,这使得它在创建可缩放布局时更可预测和方便。

使用 rem 的示例:

HTML
<div class="container">
  容器内部的一些文本
  <div class="box">
    盒子内部的一些文本
  </div>
</div>
CSS
html {
  font-size: 16px;
}

.container {
  font-size: 1rem; /* 16px */
  padding: 2rem; /* 32px */
}

.box {
  font-size: 1.5rem; /* 24px */
  margin: 1rem; /* 16px */
}

em 和 rem 的比较:

  • em:依赖于父元素的字体大小,这可能在嵌套时导致级联效应
  • rem:依赖于根元素 (html) 的字体大小,使其更可预测且易于使用

4.3 组合使用 %

使用相对单位(emrem)结合百分比可以创建灵活且自适应的布局,能够在任何设备上正确显示。

示例:组合使用 %

我们将创建一个布局,其中元素的大小使用百分比和相对单位来确定。

CSS
html {
  font-size: 16px;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.header, .footer {
  background-color: #333;
  color: white;
  padding: 1rem;
  text-align: center;
}

.content {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
}

.sidebar {
  flex: 1 1 30%;
  background-color: #f4f4f4;
  padding: 1rem;
}

.main {
  flex: 1 1 70%;
  background-color: #e4e4e4;
  padding: 1rem;
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组合使用 % 和相对单位</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <div class="header">标题</div>
      <div class="content">
        <div class="sidebar">侧边栏</div>
        <div class="main">主要内容</div>
      </div>
      <div class="footer">页脚</div>
    </div>
  </body>
</html>

代码解释:

  • html:为整个文档设置基本字体大小
  • .container:使用百分比来设置容器的宽度并将其居中
  • .header.footer:使用 rem 进行内边距,使其更可预测
  • .content:使用 Flexbox 布局侧边栏和主要内容,并在它们之间留出空隙
  • .sidebar.main:使用百分比来设置列的宽度,并使用 rem 进行内边距
1
任务
Frontend SELF ZH,  第 25 级课程 3
已锁定
应用 em
应用 em
1
任务
Frontend SELF ZH,  第 25 级课程 3
已锁定
使用 rem
使用 rem
评论
  • 受欢迎
你必须先登录才能发表评论
此页面还没有任何评论