尺寸属性

尺寸属性用于控制元素的宽度和高度，是 CSS 中最常用的属性之一。掌握尺寸属性对于创建精确的布局至关重要。

宽度属性

width 属性用于设置元素的宽度。

基本用法

/* 使用像素 */
.box {
  width: 200px;
}

/* 使用百分比 */
.container {
  width: 100%;
}

/* 使用 em */
.em-width {
  width: 20em;
}

/* 使用 rem */
.rem-width {
  width: 10rem;
}

/* 使用视口单位 */
.vw-width {
  width: 50vw;
}

/* 自动宽度（默认） */
.auto-width {
  width: auto;
}

最大宽度

max-width 属性用于设置元素的最大宽度。

/* 使用像素 */
.box {
  max-width: 800px;
}

/* 使用百分比 */
.container {
  max-width: 100%;
}

/* 使用视口单位 */
.vw-max {
  max-width: 90vw;
}

/* 无限制 */
.no-limit {
  max-width: none;
}

最小宽度

min-width 属性用于设置元素的最小宽度。

/* 使用像素 */
.box {
  min-width: 200px;
}

/* 使用百分比 */
.container {
  min-width: 50%;
}

/* 使用视口单位 */
.vw-min {
  min-width: 30vw;
}

宽度的实际应用

/* 响应式容器 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 卡片宽度 */
.card {
  width: 300px;
  max-width: 100%;
}

/* 按钮宽度 */
.button {
  width: auto;
  min-width: 120px;
}

/* 图片宽度 */
img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

高度属性

height 属性用于设置元素的高度。

基本用法

/* 使用像素 */
.box {
  height: 200px;
}

/* 使用百分比 */
.container {
  height: 100%;
}

/* 使用视口高度 */
.vh-height {
  height: 50vh;
}

/* 自动高度（默认） */
.auto-height {
  height: auto;
}

最大高度

max-height 属性用于设置元素的最大高度。

/* 使用像素 */
.box {
  max-height: 400px;
}

/* 使用百分比 */
.container {
  max-height: 100%;
}

/* 使用视口高度 */
.vh-max {
  max-height: 80vh;
}

/* 无限制 */
.no-limit {
  max-height: none;
}

最小高度

min-height 属性用于设置元素的最小高度。

/* 使用像素 */
.box {
  min-height: 100px;
}

/* 使用百分比 */
.container {
  min-height: 50%;
}

/* 使用视口高度 */
.vh-min {
  min-height: 30vh;
}

高度的实际应用

/* 全屏容器 */
.fullscreen {
  width: 100%;
  height: 100vh;
}

/* 最小高度确保内容可见 */
.section {
  min-height: 400px;
}

/* 图片高度 */
img {
  height: auto;
  max-height: 500px;
}

/* 文本区域高度 */
textarea {
  height: 150px;
  min-height: 100px;
  max-height: 300px;
}

宽度和高度的组合使用

固定尺寸

.box {
  width: 300px;
  height: 200px;
}

响应式尺寸

.responsive {
  width: 100%;
  height: auto;
  max-width: 800px;
}

最小和最大尺寸

.flexible {
  width: 100%;
  min-width: 200px;
  max-width: 800px;
  height: 100%;
  min-height: 100px;
  max-height: 500px;
}

尺寸计算

包含盒模型的尺寸

/* border-box 模式 */
.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
}

/* 总宽度 = 300px */

/* content-box 模式 */
.box {
  box-sizing: content-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
}

/* 总宽度 = 300px + 40px + 10px = 350px */

百分比尺寸

/* 百分比相对于父元素 */
.container {
  width: 800px;
}

.child {
  width: 50%;  /* 400px */
}

/* 高度百分比 */
.parent {
  height: 400px;
}

.child {
  height: 50%;  /* 200px */
}

视口单位

视口单位是相对于浏览器窗口大小的单位。

vw 和 vh

/* vw - 视口宽度的百分比 */
.full-width {
  width: 100vw;
}

.half-width {
  width: 50vw;
}

/* vh - 视口高度的百分比 */
.full-height {
  height: 100vh;
}

.half-height {
  height: 50vh;
}

vmin 和 vmax

/* vmin - 视口宽度和高度中较小值的百分比 */
.box {
  width: 80vmin;
  height: 80vmin;
}

/* vmax - 视口宽度和高度中较大值的百分比 */
.box {
  width: 80vmax;
  height: 80vmax;
}

尺寸的实际应用示例

响应式图片

.responsive-image {
  width: 100%;
  height: auto;
  max-width: 1200px;
}

卡片组件

.card {
  width: 300px;
  max-width: 100%;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

按钮样式

.button {
  width: auto;
  min-width: 120px;
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

输入框样式

.input {
  width: 100%;
  max-width: 500px;
  padding: 10px 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

容器样式

.container {
  width: 100%;
  max-width: 1200px;
  min-width: 320px;
  margin: 0 auto;
  padding: 0 20px;
}

模态框

.modal {
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

尺寸的动画效果

/* 宽度动画 */
.animated-width {
  width: 200px;
  transition: width 0.3s ease;
}

.animated-width:hover {
  width: 300px;
}

/* 高度动画 */
.animated-height {
  height: 100px;
  transition: height 0.3s ease;
}

.animated-height:hover {
  height: 200px;
}

/* 最大高度动画（用于展开/折叠） */
.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.collapsible.open {
  max-height: 500px;
}

尺寸的最佳实践

1. 使用响应式尺寸

/* 推荐 */
.responsive {
  width: 100%;
  max-width: 1200px;
}

/* 不推荐 */
.fixed {
  width: 1200px;
}

2. 设置合理的最小和最大尺寸

/* 推荐 */
.flexible {
  width: 100%;
  min-width: 320px;
  max-width: 1200px;
}

/* 不推荐 */
.too-flexible {
  width: 100%;
  /* 可能导致在超宽屏幕上过大 */
}

3. 使用视口单位创建响应式设计

/* 全屏英雄区域 */
.hero {
  width: 100vw;
  height: 100vh;
}

/* 响应式方块 */
.square {
  width: 50vmin;
  height: 50vmin;
}

4. 图片使用 max-width

/* 推荐 */
img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* 不推荐 */
img {
  width: 100%;
  height: 100%;  /* 可能导致图片变形 */
}

总结

尺寸属性用于控制元素的宽度和高度：

1. width 和 height：设置元素的宽度和高度
2. max-width 和 max-height：设置元素的最大尺寸
3. min-width 和 min-height：设置元素的最小尺寸
4. 视口单位：相对于浏览器窗口大小的单位
5. 百分比尺寸：相对于父元素的尺寸
6. 盒模型影响：box-sizing 影响尺寸的计算

记住以下几点：

• 理解不同尺寸单位的区别和适用场景
• 使用 max-width 和 max-width 创建响应式布局
• 合理设置 min-width 和 min-height
• 注意盒模型对尺寸的影响
• 使用视口单位创建响应式设计
• 图片使用 max-width 防止变形