CSS overflow 属性简介
本帖最后由 马黑黑 于 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:32 编辑 <br /><br /><style>
.wrapbox {
margin: auto;
width: 500px;
display: flex;
place-items: center center;
}
.btnside {
width: 160px;
}
.btnside > p { margin: 0; padding: 6px 0; }
#pre_test {
width: 300px;
height: 160px;
border: 1px solid #ccc;
tab-size: 4;
padding: 8px;
}
</style>
<div class="wrapbox">
<div class="btnside">
<p><button class="btnoverflow" value="visible">overflow: visible</button></p>
<p><button class="btnoverflow" value="auto">overflow: auto</button></p>
<p><button class="btnoverflow" value="scroll">overflow: scroll</button></p>
<p><button class="btnoverflow" value="hidden">overflow: hidden</button></p>
<p><button class="btnoverflow" value="clip">overflow: clip</button></p>
</div>
<pre id="pre_test" contenteditable></pre>
</div>
<script>
let btns = document.querySelectorAll('.btnoverflow');
btns.forEach( (item,key) => {
item.onclick = () => {
pre_test.style.overflow = item.value;
};
});
</script>
本帖最后由 马黑黑 于 2023-1-9 12:49 编辑
overflow 的 clip 值是新增属性值，常规用途下，它和 hidden 貌似没啥区别，但其实是有的，我在后面会补充说明。在一些特殊场景，clip 是大有作为的——它的出现是为了配套某些需求，不过我们一般用不上。
clip 和 hidden 的常规区别在于，当元素里的内容很多，使用了 clip，则用方向键无法选择能显示以外的其余内容，因为这些内容被剪裁了（但内容还在不会删除）；使用 hidden，则可以在元素获得焦点的前提上，得以使用方向键上下左右移动输入光标，从而可以查看被隐藏的内容。
原来overflow还能分X向和Y向单独控制。学习了{:4_187:} 马黑黑 发表于 2023-1-9 12:30
本帖最后由 马黑黑 于 2023-1-9 12:32 编辑
.wrapbox {
margin: auto;
这些值都被黑黑汇总在一个演示里了，输入点内容，一个个试了体验了一下。这样的体验真直观{:4_199:} 红影 发表于 2023-1-9 13:24
原来overflow还能分X向和Y向单独控制。学习了
粑粑麻麻才是正统属性{:4_170:} 红影 发表于 2023-1-9 13:26
这些值都被黑黑汇总在一个演示里了，输入点内容，一个个试了体验了一下。这样的体验真直观
嗯，这里用的是简写属性，没有细化为xy方向 马黑黑 发表于 2023-1-9 13:33
粑粑麻麻才是正统属性
都是你给起的名字{:4_173:} 马黑黑 发表于 2023-1-9 13:33
嗯，这里用的是简写属性，没有细化为xy方向
已经能看出效果了，想象一下也可的。 根本看不懂，出去溜达溜达。。。。{:4_193:} 东篱闲人 发表于 2023-1-9 15:49
根本看不懂，出去溜达溜达。。。。
你喜欢鼓捣文本的，这个对你有用，比方说，你想在帖子里面放大段的文本，但又想节约空间，这个时候，元素的 overflow 就能派上用场 红影 发表于 2023-1-9 14:58
已经能看出效果了，想象一下也可的。
使用的时候根据需要设置x或y或简写属性 红影 发表于 2023-1-9 14:57
都是你给起的名字
{:4_173:} 越来越深奥了，如老子般玄之又玄矣{:4_203:} 马黑黑 发表于 2023-1-9 17:07
使用的时候根据需要设置x或y或简写属性
我一般是全部隐藏，不分彼此。 马黑黑 发表于 2023-1-9 17:07
还有爷爷奶奶，儿子孙子，反正称谓都被你用上了{:4_173:} 红影 发表于 2023-1-9 19:04
还有爷爷奶奶，儿子孙子，反正称谓都被你用上了
这些称谓，不是我的发明，w3c组织这么用的 红影 发表于 2023-1-9 19:03
我一般是全部隐藏，不分彼此。
还是得根据需要的。应用场景的需求，决定如何做。 樵歌 发表于 2023-1-9 18:21
越来越深奥了，如老子般玄之又玄矣
这是一二三的关系而已 马黑黑 发表于 2023-1-9 17:06
你喜欢鼓捣文本的，这个对你有用，比方说，你想在帖子里面放大段的文本，但又想节约空间，这个时候，元素 ...
{:5_103:}