📌  相关文章
📜  CSS width属性(1)

📅  最后修改于: 2023-12-03 15:30:09.037000             🧑  作者: Mango

CSS width属性

CSS width属性用于设置HTML元素的宽度。在许多情况下，我们需要使用宽度属性来定义网页中的每个部分的宽度。

语法

width: length|initial|inherit;

length

我们可以使用像素、百分比和em等单位来指定元素的宽度。

.container {
  width: 500px;
}
initial

使用initial值可以将元素的宽度设为它的默认值。

.container {
  width: initial;
}
inherit

使用inherit值可以将元素的宽度设为其父元素的宽度。

.container {
  width: inherit;
}
示例

以下是一个简单的示例，说明如何使用width属性设置元素的宽度。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 80%;
      margin: 0 auto;
      border: 1px solid black;
    }
    .box {
      width: 25%;
      height: 100px;
      background-color: yellow;
      border: 1px solid black;
      float: left;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

在这个例子中，我们使用width属性将容器(.container)的宽度设为80%。然后我们设定一个子元素(.box)的宽度为25%。此外，我们还使用float属性使它们并排排列。

总结

CSS width属性用于设置HTML元素的宽度。我们可以使用像素、百分比和em等单位来指定元素的宽度。默认值是auto。inherit值可以将元素的宽度设为其父元素的宽度。