如何通过css width和height设置元素尺寸

width 和 height 用于设置元素内容区域的尺寸，不包括 padding、border 和 margin（除非 box-sizing 改为 border-box）；块级元素默认占满父容器宽度，行内元素由内容决定大小；可使用像素、百分比、vh、auto 或 fit-content 等值；推荐结合 box-sizing: border-box 和相对单位实现响应式布局，提升页面适配性与可控性。

在CSS中，width 和 height 属性用于控制元素内容区域的尺寸。正确使用这两个属性可以帮助你精确布局网页中的各个部分。

理解 width 和 height 的作用

width 设置元素内容区域的宽度，height 设置高度。它们不包括 padding、border 和 margin（除非使用 box-sizing 改变计算方式）。

默认情况下，块级元素（如 div、p）会占据父容器的全部宽度，而行内元素（如 span、a）的尺寸由其内容决定。

常见取值方式：

• 具体数值：如 width: 200px; 或 height: 100px;
• 百分比：如 width: 50%;，相对于父容器的宽度
• auto：浏览器自动计算，默认值
• max-content / min-content / fit-content()：根据内容自动调整尺寸

设置固定尺寸

当需要一个固定大小的盒子时，直接指定像素值即可。

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

示例：

.box {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}

这个元素将始终保持 300px 宽和 200px 高，不受内容或屏幕尺寸影响。

使用相对单位和响应式尺寸

为了让页面适配不同设备，推荐使用相对单位。

常用方法：

• width: 50%; —— 宽度为父容器的一半
• height: 80vh; —— 高度为视口高度的 80%
• width: fit-content; —— 宽度刚好包裹内容

结合 max-width 和 min-height 可避免内容溢出或容器过小的问题。

注意 box-sizing 的影响

默认的 box-sizing: content-box; 会让 width 和 height 仅作用于内容区。如果添加 padding 或 border，实际占用空间会更大。

建议统一设置：

* {
box-sizing: border-box;
}

这样设置后，width 和 height 包含了 padding 和 border，更容易控制整体尺寸。

基本上就这些。合理使用 width 和 height，配合 box-sizing 和响应式单位，能让你的布局更可控、更灵活。