前端必知必会-CSS 布局overflow属性

文章目录

• CSS 布局 - 溢出
• • overflow: visible
  • overflow: hidden
  • overflow: scroll
  • overflow: auto
  • overflow-x 和 overflow-y
• 总结

CSS 布局 - 溢出

overflow 属性指定当元素内容太大而无法容纳在指定区域时是否剪切内容或添加滚动条。

overflow 属性具有以下值：

• visible - 默认。溢出不会被剪切。内容在元素框外呈现
• 隐藏 - 溢出被剪切，其余内容将不可见
• 滚动 - 溢出被剪切，并添加滚动条以查看其余内容
• 自动 - 与滚动类似，但它添加了仅在必要时显示滚动条

注意：溢出属性仅适用于具有指定高度的块元素。
注意：在 OS X Lion（在 Mac 上）中，滚动条默认隐藏，仅在使用时显示（即使“overflow:scroll”设置）。

overflow: visible

默认情况下，溢出是可见的，这意味着它不会被剪裁，并且会渲染到元素的框之外：

当您想要更好地控制布局时，可以使用 overflow 属性。 overflow 属性指定内容溢出元素框时会发生什么情况。

示例

div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}

overflow: hidden

使用 hidden 值，溢出会被剪裁，并且其余内容被隐藏：

当您想要更好地控制布局时，可以使用 overflow 属性。 overflow 属性指定当内容溢出元素框时会发生什么。
示例

div {
overflow: hidden;
}

overflow: scroll

设置值滚动时，溢出会被剪切，并添加一个滚动条以在框内滚动。请注意，这将在水平和垂直方向上添加滚动条（即使您不需要它）：

当您想要时，可以使用 overflow 属性更好地控制布局。 overflow 属性指定当内容溢出元素框时会发生什么。
示例

div {
overflow: scroll;
}

overflow: auto

auto 值与 scroll 类似，但它仅在必要时添加滚动条：

当您想要更好地控制布局时，可以使用 overflow 属性。overflow 属性指定当内容溢出元素框时会发生什么。示例

div {
overflow: auto;
}

overflow-x 和 overflow-y

overflow-x 和 overflow-y 属性指定是否仅在水平或垂直（或两者）上更改内容溢出：

overflow-x 指定如何处理内容的左/右边缘。
overflow-y 指定如何处理内容的顶部/底部边缘。

当您想要更好地控制布局时，可以使用 overflow 属性。 overflow 属性指定如果内容溢出元素的框。
示例

div {
overflow-x: hidden; /* 隐藏水平滚动条 */
overflow-y: scroll; /* 添加垂直滚动条 */
}

总结

本文介绍了的CSS 布局overflow属性使用，如有问题欢迎私信和评论