使用 width 和 height 可设置元素固定尺寸，如 200px 宽、100px 高；2. 百分比单位实现响应式布局，如宽度80%、高度50%；3. vw、vh、em、rem 等单位适配不同场景，如 50vw 宽、30vh 高；4. 设置 box-sizing: border-box 可让宽高包含 padding 和 border，便于布局控制。
设置元素的宽度和高度是CSS中最基础的操作之一，主要通过 width 和 height 属性来实现。你可以使用具体数值、百分比或其他相对单位来定义大小。
给元素设置固定的宽度和高度，通常使用像素（px）作为单位。
.box {
width: 200px;
height: 100px;
background-color: #007bff;
}
这个例子中，元素的宽度为200像素，高度为100像素，背景为蓝色。
让元素的尺寸相对于父容器变化，适合响应式布局。
立即学习“前端免费学习笔记（深入）”；
.container {
width: 80%;
height: 50%;
margin: 0 auto;
background-color: #28a745;
}
元素宽度占父容器的80%，高度占其父元素高度的50%。注意父元素需要有明确的高度，否则百分比高度可能无效。
CSS还支持多种单位，适应不同场景：
.responsive-box {
width: 50vw; /* 视窗宽度的50% */
height: 30vh; /* 视窗高度的30% */
background-color: #dc3545;
}
默认情况下，元素的 padding 和 border 会增加总尺寸。为了更直观地控制宽高，推荐设置：
* {
box-sizing: border-box;
}
这样设置后，width 和 height 包含了 padding 和 border，更容易计算布局。
基本上就这些。合理使用单位和 box-sizing 能让你更精准地控制元素尺寸。
以上就是如何用css设置元素宽度与高度的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
916
收藏
