15. 尺寸与溢出

设置宽度和高度

width 和 height 是最基础的尺寸属性，控制元素的宽高。

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

常用单位

.px    { width: 200px; }       /* 固定像素 */
.percent { width: 50%; }       /* 相对于父元素 */
.vw    { width: 100vw; }       /* 视口宽度 */
.vh    { height: 100vh; }      /* 视口高度 */

百分比是相对于父元素的对应尺寸。vw 和 vh 是相对于浏览器视口的大小。

最大和最小尺寸

有时候需要限制元素的尺寸范围，而不是写死。

max-width 和 max-height

.box {
  max-width: 800px;
  max-height: 400px;
}

元素可以比这个值小，但不能超过。max-width 在响应式布局中非常常用：

.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

这样在大屏幕上最大 1200px，小屏幕上自动缩小。

min-width 和 min-height

.box {
  min-width: 300px;
  min-height: 100px;
}

元素可以比这个值大，但不能更小。

overflow：处理内容溢出

当内容超出容器尺寸时，overflow 属性控制如何处理。

四个常用值

值	效果
visible	默认值，溢出内容可见
hidden	溢出部分被裁剪，不可见
scroll	始终显示滚动条
auto	仅在需要时显示滚动条

/* 溢出内容隐藏 */
.hidden {
  overflow: hidden;
}

/* 溢出时显示滚动条 */
.scroll {
  overflow: scroll;
}

/* 自动判断是否需要滚动条 */
.auto {
  overflow: auto;
}

单独控制水平或垂直

/* 只控制水平方向 */
overflow-x: hidden;

/* 只控制垂直方向 */
overflow-y: auto;

可以组合使用：

.box {
  overflow-x: hidden;   /* 水平溢出隐藏 */
  overflow-y: auto;     /* 垂直溢出显示滚动条 */
}

overflow: hidden 的妙用

overflow: hidden 不只是隐藏溢出内容，它还有几个实用场景：

清除浮动

当子元素浮动时，父元素高度会塌陷。给父元素加 overflow: hidden 可以解决：

.parent {
  overflow: hidden;  /* 包含浮动子元素 */
}

防止外边距合并

给父元素加 overflow: hidden，可以防止子元素的外边距和父元素合并：

.parent {
  overflow: hidden;
}

overflow 的注意事项

overflow 只对具有明确尺寸的块元素生效。如果元素没有设置高度，它会随内容自动扩展，就不会有溢出。

/* 没有设置高度，overflow 不生效 */
.box {
  width: 200px;
  overflow: hidden;  /* 高度自动，不会裁剪 */
}

/* 设置了高度，overflow 才生效 */
.box {
  width: 200px;
  height: 100px;
  overflow: hidden;  /* 超出 100px 的内容被裁剪 */
}

下一章我们学习显示与隐藏，搞清楚 display:none、visibility:hidden、opacity:0 这三种隐藏方式的区别。