1.宽度
元素内容区域的宽度可以使用 width 属性来设置，该属性有以下可选值：
| 价值 | 解释 |
|---|---|
| 汽车 | 默认情况下，浏览器会自动计算元素的实际宽度。 |
| 长度 | 使用 px、cm 或其他单位的特定值定义宽度 |
| % | 根据父元素宽度的百分比定义宽度 |
| 继承 | 从父元素继承宽度属性值 |
提示：对于<img>标签，如果仅指定 width 属性，则 height 属性将按原始图像大小按比例缩放。
一般来说，width属性应该与height属性结合使用，以同时定义元素的宽度和高度。这是因为某些元素没有默认宽度或高度（或者默认宽度和高度为 0px）。 ），宽度或者高度没有定义，并且元素没有内容（子元素，文本等），那么这个元素的宽度或者高度设置为0px。外部。
[示例] 使用 width 属性设置元素的宽度时：
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-top: 5px;
margin-bottom: 5px;
}
div.box-one {
/*結果をより明確に示すために、ここで要素に上枠線と背景色を設定しています*/
border: 1px solid black;
background: #CFF;
}
span {
border: 1px solid red;
background: #CCC;
}
div.box-two {
border: 1px solid black;
background: #CFF;
width: 200px;
}
img.img-one {
width: 100px;
}
img.img-two {
width: 160px;
height: 80px;
}
</style>
</head>
<body>
<div class="box-one"></div>
<span></span>
<div class="box-two">width 属性</div>
<img src="./css.png" class="img-one">
<img src="./css.png" class="img-two">
</body>
</html> 执行结果如下图所示。
图：宽度属性演示[/caption]2.高度
height 属性用于定义元素内容区域的高度，该属性的可选值为：
| 价值 | 解释 |
|---|---|
| 汽车 | 默认情况下，浏览器会自动计算元素的实际高度 |
| 长度 | 通过使用特定值匹配 px、cm 和其他单位来定义高度 |
| % | 根据父元素高度的百分比定义高度 |
| 继承 | 从父元素继承宽度属性值 |
提示：不能将宽度或高度属性的值设置为负数。
默认情况下，浏览器将一些元素如<div> 、 <p>的宽度设置为 100%，而元素的高度是根据元素内的内容来确定的，因此在某些情况下元素的宽度必须设置为固定的宽度或高度。
[示例] 使用 width 和 height 属性设置元素的宽度和高度。
<!DOCTYPE html>
<html>
<head>
<style>
div {
/*要素の上部線と背景色をより直感的に表示するため、ここでは要素に上部線と背景色を設定しています*/
border: 1px solid black;
background: #CFF;
width: 300px;
height: 100px;
}
p {
border: 1px solid green;
background: #CCC;
width: 150px;
height: 50px;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html> 执行结果如下图所示。
图：高度属性演示[/caption]3.最大宽度和最大高度
max-width 和 max-height 属性分别用于设置元素内容区域的最大宽度和高度。如果定义了max-width和max-height属性，则无论宽度的实际值如何，width和height属性的实际值都小于等于max-width和max-height值或高度属性。 – 高度属性。 max-width 和 max-height 属性的可选值为：
| 价值 | 解释 |
|---|---|
| 没有任何 | 默认值意味着元素的最大宽度或高度没有限制 |
| 长度 | 使用px、cm等单位的特定值来定义元素的最大宽度或高度 |
| % | 根据父元素的宽度和高度百分比定义最大宽度或高度 |
| 继承 | 从父元素继承 max-width 或 max-height 属性的值 |
以max-width属性为例：（max-height属性也有类似的特性）
- 如果max-width属性的值小于width属性，则width属性的值被重新定义为与max-width属性相同的值。
- 如果 max-width 属性的值大于 width，则忽略 max-width 属性。
- 如果 max-width 属性的值小于 min-width，则忽略 max-width 属性。
[示例] 使用 max-width 和 max-height 属性设置元素的最大宽度和高度。
<!DOCTYPE html>
<html>
<head>
<style>
div {
/*効果をより鮮明に表示するため、上枠線と背景色を設定する*/
border: 1px solid black;
background: #CFF;
max-width: 280px;
max-height: 200px;
width: 300px;
height: 180px;
}
</style>
</head>
<body>
<div>
max-width: 280px;<br>
max-height: 200px;<br>
width: 300px;<br>
height: 180px;
</div>
</body>
</html> 执行结果如下图所示。
图：max-width 和 max-height 属性演示[/caption] 
min-width 和 min-height 属性用于设置元素内容区域的最小宽度和高度，如果定义了 min-width 和 min-height 属性，则 width 或 height 即与实际值无关属性：宽度和高度属性。实际值将大于或等于 min-width 和 min-height 属性的值。 min-width 和 min-height 属性的可能值为：
| 价值 | 解释 |
|---|---|
| 长度 | 使用特定值（以 px、cm 或其他单位为单位）定义元素的最小宽度或高度。默认值因浏览器而异 |
| % | 根据父元素的宽度和高度百分比定义最小宽度或高度 |
| 继承 | 从父元素继承min-width和min-height属性值 |
以min-width属性为例：（min-height属性也有类似的特性）
- 如果 min-width 属性的值小于 width，则忽略 min-width 属性。
- 如果min-width属性的值大于width，则min-width属性的值被重新定义为与min-width属性相同的值。
- 如果 min-width 属性的值大于 max-width，则忽略 max-width 属性。
[示例] 使用 min-width 和 min-height 属性设置元素的最小宽度和高度。
<!DOCTYPE html>
<html>
<head>
<style>
div {
/*効果がよく分かるように、上辺の線と背景色を設定する*/
border: 1px solid black;
background: #CFF;
min-width: 280px;
min-height: 200px;
width: 300px;
height: 180px;
}
</style>
</head>
<body>
<div>
min-width: 280px;<br>
min-height: 200px;<br>
width: 300px;<br>
height: 180px;
</div>
</body>
</html> 执行结果如下图所示。
图：min-width 和 min-height 属性的演示[/caption]
![2021 年如何设置 Raspberry Pi Web 服务器 [指南]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
