使用 width 和 height 可设置元素固定尺寸，如 200px 宽、100px 高；2. 百分比单位实现响应式布局，如宽度80%、高度50%；3. vw、vh、em、rem 等单位适配不同场景，如 50vw 宽、30vh 高；4. 设置 box-sizing: border-box 可让宽高包含 padding 和 border，便于布局控制。
设置元素的宽度和高度是CSS中最基础的操作之一，主要通过 width 和 height 属性来实现。你可以使用具体数值、百分比或其他相对单位来定义大小。
1. 使用 width 和 height 设置固定尺寸
给元素设置固定的宽度和高度，通常使用像素（px）作为单位。
.box { width: 200px; height: 100px; background-color: #007bff;}
这个例子中，元素的宽度为200像素，高度为100像素，背景为蓝色。
2. 使用百分比设置响应式尺寸
让元素的尺寸相对于父容器变化，适合响应式布局。
立即学习“前端免费学习笔记（深入）”；
.container { width: 80%; height: 50%; margin: 0 auto; background-color: #28a745;}
元素宽度占父容器的80%，高度占其父元素高度的50%。注意父元素需要有明确的高度，否则百分比高度可能无效。
稿定抠图
AI自动消除图片背景
76 查看详情
3. 使用其他单位（如 vw、vh、em、rem）
CSS还支持多种单位，适应不同场景：
vw / vh：视窗宽度/高度的1%em：相对于当前元素或父元素的字体大小rem：相对于根元素（html）字体大小
.responsive-box { width: 50vw; /* 视窗宽度的50% */ height: 30vh; /* 视窗高度的30% */ background-color: #dc3545;}
4. 处理盒模型的影响（box-sizing）
默认情况下，元素的 padding 和 border 会增加总尺寸。为了更直观地控制宽高，推荐设置：
* { box-sizing: border-box;}
这样设置后，width 和 height 包含了 padding 和 border，更容易计算布局。
基本上就这些。合理使用单位和 box-sizing 能让你更精准地控制元素尺寸。
以上就是如何用css设置元素宽度与高度的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1022871.html
微信扫一扫 
支付宝扫一扫 
