前端必知必会-CSS宽高

---

CSSHeight, Width and Max-width

CSS 高度和宽度属性用于设置元素的高度和宽度。

CSS 最大宽度属性用于设置元素的最大宽度。

CSS 设置高度和宽度

Height和Width 属性用于设置元素的高度和宽度。

高度和宽度属性不包括填充、边框或边距。它设置元素的填充、边框和边距内区域的高度/宽度。

CSS 高度和宽度值

高度和宽度属性可能具有以下值：

• auto - 这是默认值。浏览器计算高度和宽度
• length - 以 px、cm 等为单位定义高度/宽度。
• % - 以包含块的百分比为单位定义高度/宽度
• initial - 将高度/宽度设置为其默认值
• inherit - 高度/宽度将从其父值继承

示例
设置 <div> 元素的高度和宽度：

div {
height: 200px;
width: 50%;
background-color: powderblue;
}

示例
设置另一个 <div> 元素的高度和宽度：

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

注意：请记住，高度和宽度属性不包括填充、边框或边距！它们设置元素内边距、边框和边距内区域的高度/宽度！

设置 max-width

max-width 属性用于设置元素的最大宽度。

max-width 可以指定为长度值，如 px、cm 等，或包含块的百分比 (%)，或设置为 none（这是默认值。表示没有最大宽度）。

注意：如果您出于某种原因在同一个元素上同时使用 width 属性和 max-width 属性，并且 width 属性的值大于 max-width 属性；则将使用 max-width 属性（并且将忽略 width 属性）。

示例
此 <div> 元素的高度为 100 像素，最大宽度为 500 像素：

div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}

---

总结

本文介绍了的CSS宽高使用，如有问题欢迎私信和评论