# 宽高控制

URL: https://caijiao.org/css/05-box-model/02-width-height
Source: docs/css/05-box-model/02-width-height.md
Description: 宽高控制是布局设计的关键，通过 CSS 的 width 和 height 属性设置元素的尺寸，并配合最大最小值实现灵活布局。

CSS 提供多种属性来控制元素的宽度和高度，帮助开发者实现响应式和灵活的页面布局。

## 1. 固定宽高

直接设置元素的宽度和高度：

```css
width: 200px;
height: 150px;
```

## 2. 百分比宽高

相对于父元素尺寸的百分比：

```css
width: 50%;
height: 100px;
```

注意百分比高度要求父元素有明确高度。

## 3. 最大和最小宽高

限制元素的尺寸范围：

```css
max-width: 300px;
min-width: 100px;
max-height: 400px;
min-height: 150px;
```

## 4. 自动尺寸

`auto` 表示由浏览器根据内容和布局自动计算尺寸：

```css
width: auto;
height: auto;
```

## 宽高控制示例

[在线代码演示](/css/demos/7.html)