宽度与高度
width/height、min/max-width/height、百分比/像素/视口单位
宽度与高度
width 和 height 设置元素的尺寸——支持像素、百分比、视口单位。
学完本章你将： 掌握 width/height、min/max- 系列、常见单位。
基本用法
css
.fixed { width: 300px; height: 200px; } /* 固定像素 */
.percent { width: 50%; } /* 父元素的 50% */
.full { width: 100%; } /* 填满父元素 */min/max 限制
css
/* min-width：最小宽度——再窄也不小于此 */
.responsive {
width: 80%;
min-width: 320px; /* 手机最小 320px */
max-width: 1200px; /* 桌面最大 1200px */
}
/* 图片自适应 */
img {
max-width: 100%; /* 不超过父容器 */
height: auto; /* 保持比例 */
}视口单位
css
.vw-example { width: 50vw; } /* 视口宽度的 50% */
.vh-example { height: 100vh; } /* 视口高度 100%——全屏 */
.min-example { width: 50vmin; } /* vw 和 vh 中较小的 */
.max-example { width: 50vmax; } /* vw 和 vh 中较大的 */auto 与 100% 区别
css
/* width: auto（默认）——填满剩余空间 */
.auto-width { width: auto; }
/* width: 100%——等于父元素宽度（可能溢出） */
.full-width { width: 100%; }
/* 如果还有 padding/border，就会溢出 */