CSS overflow 属性简介

马黑黑 · 发表于 2023-1-9 12:29

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-1-9 12:34 编辑

overflow 属性用于处理元素内容溢出时的行为。不过，即使元素的内容没有溢出，overflow 的不同设置均可能影响元素的外观，例如滚动条的有无肯定对元素的外在表现产生不同的效果。

很多人以为 overflow 是个正统属性，其实不然，它是一个简写属性，它的粑粑是 overflow-x，麻麻是 overflow-y。我们设置元素的横向滚动条，用 overflow-x，设置纵向的，用 overflow-y :

#mybox {
width: 200px;
height: 100px;
border: 1px solid red;
overflow-x: hidden;
overflow-y: scroll;
}

这样，<div id="mybox"></div> 的盒子，就拥有了纵向滚动条，不论元素里有没有溢出的内容，甚至没有内容，纵向滚动条也会出现。代码中，overflow-x: hidden;，表示横向滚动条隐藏（hidden，隐藏），overflow-y: scroll;，表示纵向要滚动条（scroll，滚动）。overflow-x 和 overflow-y 可以简写为：

overflow: hidden scroll;

当 xy 滚动条值一致时，简写的 overflow 只需写一个，例如都需要滚动条，可写成：

overflow: scroll;

overflow 可能的值汇总：

visible - 默认值。内容不会被修剪，会呈现在元素框之外
hidden - 内容会被修剪，并且其余内容不可见
scroll - 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto - 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
clip - 剪裁内容，不出现滚动条
inherit - 从父元素继承 overflow 属性的值

我将在后面放一个演示例子，便于感兴趣的朋友体验、观察 overflow 设置不同的值对元素外观、内容溢出的效果。该示例用一个 pre 标签做盒子，初始时它没有内容，大家可以先观察空白是设置滚动条样式的效果，再输入多行较长文本继续测试、查看。

马黑黑 · 发表于 2023-1-9 12:30

本帖最后由马黑黑于 2023-1-9 12:32 编辑

马黑黑 · 发表于 2023-1-9 12:42

本帖最后由马黑黑于 2023-1-9 12:49 编辑

overflow 的 clip 值是新增属性值，常规用途下，它和 hidden 貌似没啥区别，但其实是有的，我在后面会补充说明。在一些特殊场景，clip 是大有作为的——它的出现是为了配套某些需求，不过我们一般用不上。
clip 和 hidden 的常规区别在于，当元素里的内容很多，使用了 clip，则用方向键无法选择能显示以外的其余内容，因为这些内容被剪裁了（但内容还在不会删除）；使用 hidden，则可以在元素获得焦点的前提上，得以使用方向键上下左右移动输入光标，从而可以查看被隐藏的内容。