宽度和高度

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 37 课，共 76 课。

在 CSS 中，width 和 height 属性用于设置元素内容区域的尺寸。这些属性对于控制网页上元素的大小和布局至关重要。

使用 width 和 height 属性的基本语法如下：

selector {
    width: value;
    height: value;
}

width：元素内容区域的宽度。

height：元素内容区域的高度。

value：所需的宽度或高度值，可以使用像素（px）、em（em）、百分比（%）或其他有效的 CSS 单位。你也可以使用关键字 auto，让浏览器根据内容自动计算宽度或高度。

例如：

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

在这个示例中，所有 <div> 元素的宽度都是 300px，高度都是 200px；而所有 <img> 元素的宽度都占其父元素宽度的 100%，高度则会自动计算，以保持宽高比。

挑战

简单

给定一个包含分区（<div>）和图像（<img>）的 HTML 文档。你的任务是使用 width 和 height 属性来设置这些元素的尺寸。按以下步骤操作：

编写一条 CSS 规则，用于选择 <div> 元素。将 width 设为 400px，将 height 设为 250px。
编写一条 CSS 规则，用于选择 <img> 元素。将 width 设为 300px，将 height 设为 auto。

亲手试试

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>