正在加载...

CSS 高度与宽度

你会给盒子加框、圆角，以及外内间距。下一步：决定盒子有多大。width 和 height 设置内容盒的尺寸——这块核心有多宽、多高。

width 和 height 做什么？

width 控制水平尺寸。height 控制垂直尺寸。常见取值用 px 这类长度，或 % 这类相对尺寸。若不去改，许多元素会按内容和布局上下文自行决定大小。

用像素固定尺寸

清晰的日常起点：给面板一个精确的像素宽度（可选高度）。

固定像素宽度

css
CSS Code 
.panel {
width: 320px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}

宽高一起设

设计需要明确矩形时——缩略图框、瓷砖、媒体槽——两个都设。

瓷砖上的宽和高

css
CSS Code 
.tile {
width: 160px;
height: 120px;
border: 2px solid #0f766e;
background-color: #ecfdf5;
}

百分比宽度

% 宽度通常相对于包含块的宽度（常常是父元素）。width: 50% 表示「大约父级一半宽」，不是魔法般的半个屏幕。

父级宽度的一半

css
CSS Code 
.half {
width: 50%;
border: 1px solid #94a3b8;
padding: 0.75rem;
background-color: #f8fafc;
}

尺寸工具一眼看清

除了普通的 width 和 height，CSS 还给护栏。

📊 宽高工具

工具 作用 日常说明
width / height 内容盒的首选尺寸 固定或流动尺寸从这里开始
min-width / min-height 不要小于此 保持按钮或侧栏可用
max-width / max-height 不要大于此 缓和巨大图片或过宽文字
auto 让浏览器计算 默认高度常常跟随内容
% 相对包含块 宽度 % 常见；高度 % 需要父级有明确高度

用 min-width 当地板

布局被挤时盒子仍要可用，这就很有用。

最小宽度地板

css
CSS Code 
.btn-wide {
min-width: 12rem;
padding: 0.6rem 1rem;
background-color: #0f766e;
color: #ffffff;
border: none;
}

用 max-width 当天花板

可读文字，或大屏上不要无限拉长的图片——经典习惯。

最大宽度天花板

css
CSS Code 
.prose {
max-width: 40rem;
width: 100%;
margin: 0 auto;
line-height: 1.6;
}

高度常常保持 auto

对文本块，让高度随内容增长。过小的固定高度可能裁切文字，除非你也规划 overflow（稍后课程）。

auto 高度跟随内容

css
CSS Code 
.article {
width: 100%;
max-width: 36rem;
height: auto; /* 随段落增长 */
padding: 1rem;
border: 1px solid #cbd5e1;
}

自己试试

  1. 做 width: 320px 且 padding/边框可见的面板。
  2. 做 160×120 且宽高都设的瓷砖。
  3. 在更宽父级里放 width: 50% 的子元素，并改变父级大小。
  4. 给按钮加 min-width: 12rem 并缩小视口。
  5. 给文本块 max-width: 40rem 和 height: auto——再试很小的固定高度，观察裁切风险。

常见错误

  • 父级没有明确高度却用 height: 50%（百分比可能不如你所想）
  • 给文本框锁很短的 height，却奇怪内容被裁切
  • 大图或长行忘记 max-width
  • 把 width（内容盒尺寸）和 padding（内侧缓冲）搞混
  • 以为 width 总包含边框和 padding——这取决于 box-sizing（很快讲）

小结

  • width 和 height 设定内容盒尺寸
  • 固定尺寸用 px，相对父级的流动宽度用 %
  • min-* 和 max-* 设地板与天花板
  • 对增长中的文字优先 height: auto
  • 百分比高度需要有明确高度的父级
  • 完整盒子算法在接下来的盒模型课里

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
9
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程