宽度（width）

在CSS中，`width` 属性用于设置元素的宽度。这个属性可以应用于大多数HTML元素，包括`div`、`span`、`p`、`ul`等。`width` 属性可以设置固定值，百分比，或自动（auto）。

固定值：
```css
width: 100px; /* 设置宽度为100像素 */
```

百分比：
```css
width: 50%; /* 设置宽度为父元素宽度的50% */
```

自动（Auto）：
```css
width: auto; /* 元素宽度根据内容自动调整 */
```

下面是一个简单的HTML和CSS示例，展示了如何使用`width`属性：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宽度示例</title>
<style>
  .box {
    background-color: #f0f0f0;
    padding: 10px;
    margin: 10px;
  }
  .fixed-width {
    width: 100px;
  }
  .percentage-width {
    width: 50%;
  }
  .auto-width {
    width: auto;
  }
</style>
</head>
<body>

<div class="box fixed-width">固定宽度</div>
<div class="box percentage-width">百分比宽度</div>
<div class="box auto-width">自动宽度</div>

</body>
</html>
```

在这个例子中，每个`div`元素都有一个`.box`类，这个类定义了背景颜色、内边距和外边距。`.fixed-width`类使用`width: 100px;`来设置一个固定的宽度，`.percentage-width`类使用`width: 50%;`来设置宽度为父元素宽度的50%，而`.auto-width`类使用`width: auto;`让元素宽度根据内容自动调整。

请注意，`width`属性只影响元素的横向尺寸，而不影响高度。如果元素的高度没有明确定义，它将根据内容自动调整。

在实际开发中，`width`属性是布局中非常重要的一个属性，它可以帮助我们创建各种布局和设计。通过合理地使用`width`和其他CSS布局属性，如`margin`、`padding`、`border`、`float`、`display`等，我们可以创建出复杂的网页布局。

宽度（width）

目录