如何在CSS中设置元素宽度和高度_width height控制尺寸

width和height属性用于设置元素内容区尺寸，支持px、%、vw/vh等单位，配合box-sizing:border-box可包含内边距和边框，结合min/max-width/height实现响应式布局，有效控制元素大小与溢出。

在CSS中控制元素的宽度和高度，主要通过 width 和 height 属性实现。这两个属性决定了元素内容区域的尺寸，是布局中最基础也是最关键的设置之一。

width 设置元素宽度

使用 width 属性可以定义元素内容区的宽度。它支持多种单位：

• 像素（px）：固定值，例如 width: 200px;
• 百分比（%）：相对于父容器的宽度，例如 width: 50%;
• 视窗单位（vw）：相对于浏览器窗口宽度的1%，例如 width: 50vw;
• auto：由浏览器自动计算，默认行为

块级元素默认 width 为 auto，会占据父容器的整行宽度。设置具体值后可限制其宽度。

height 设置元素高度

height 控制元素内容区域的高度，单位用法与 width 相同：

立即学习“前端免费学习笔记（深入）”；

• height: 100px; — 固定高度
• height: 80%; — 相对于父元素高度
• height: 100vh; — 占满整个视口高度
• height: auto; — 默认值，由内容决定高度

注意：如果子元素高度超出父元素且未设置 overflow，可能出现溢出情况。

课游记AI

AI原生学习产品

86

查看详情

盒模型对宽高的影响

元素实际占用空间还受 padding、border 和 box-sizing 影响。

• 默认情况下 box-sizing: content-box;，width/height 只包含内容
• 推荐设置 box-sizing: border-box;，此时 width 包含 padding 和 border

例如：

box-sizing: border-box;<br>width: 200px;<br>padding: 20px;<br>border: 5px solid;

最小、最大尺寸限制

为了增强响应性，可配合以下属性使用：

• min-width：设置最小宽度，防止内容被挤压
• max-width：设置最大宽度，常用于图片适配
• min-height：确保元素不会低于某个高度
• max-height：限制最大高度，配合 overflow 实现滚动

比如让图片不超出容器：
img { max-width: 100%; height: auto; }

基本上就这些。掌握 width 和 height 的设置方式，结合盒模型和响应式单位，就能灵活控制页面元素的尺寸表现。不复杂但容易忽略细节。

以上就是如何在CSS中设置元素宽度和高度_width height控制尺寸的详细内容，更多请关注php中文网其它相关文章！