菜鸟教程
教程 css tutorial

宽高控制

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;

宽高控制示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>宽高控制示例</title>
  <style>
    .fixed-size {
      width: 200px;
      height: 150px;
      background-color: #aed581;
      margin-bottom: 20px;
    }
    .percent-width {
      width: 50%;
      height: 100px;
      background-color: #81c784;
      margin-bottom: 20px;
    }
    .min-max-size {
      width: 100%;
      max-width: 300px;
      min-width: 150px;
      height: 100px;
      background-color: #4caf50;
    }
    .container {
      width: 600px;
      border: 1px solid #333;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="fixed-size">固定宽高 200x150px</div>
    <div class="percent-width">宽度 50%，高度 100px</div>
    <div class="min-max-size">宽度 100%，最大 300px，最小 150px，高度 100px</div>
  </div>
</body>
</html>

相关内容