🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

[CSS] 100%宽度与50%宽度的比较｜w-100的用法

本指南对比了width: 100%; 和 width: 50%; 的使用方式，并说明它们各自适用的场景。

🔹 部分代码

<div class="w-100">
  设置为100%宽度的元素
</div>

<style>
.w-100 {
  width: 100%;
}
</style>

💻 完整可运行代码（直接复制粘贴至HTML即可）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>100%与50%宽度的比较</title>
  <style>
    .w-100 {
      width: 100%;
      background-color: #90EE90;
      padding: 1rem;
    }
    .w-50 {
      width: 50%;
      background-color: #ADD8E6;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <div class="w-100">设置为100%宽度的元素</div>
  <div class="w-50">设置为50%宽度的元素</div>
</body>
</html>

🧩 应用与使用场景

width: 100%; 是一种基础设置方式，可使元素根据其父容器自动延展，适用于响应式设计。

而 width: 50%; 常用于双列布局，将元素宽度设为父容器的一半。

📚 实际使用中如何合理设置 width

CSS 的 width 属性用于控制元素的水平宽度，% 和 px 是两种截然不同的单位。% 是相对宽度，而 px 是绝对值。

🔍 响应式设计中使用 % 的优势

width: 100%; 在响应式设计中特别有用，因为它会根据父容器（通常是 viewport）调整大小。通常的策略是默认使用 100%，再通过媒体查询逐步调整。

📊 多列布局中的应用

width: 50%; 适合用于创建两列布局。但若不结合 display: inline-block、float 或 Flexbox/Grid 使用，元素会堆叠在一起。推荐在父元素上设置 display: flex; flex-wrap: wrap; 来实现横向排列。

需注意，% 设置的宽度默认不包括 padding 和 border。若设置 box-sizing: border-box，则可将这些值计算进宽度中，布局更易控制。

已复制！

相关模板