Detailed Explanation of overflow attribute
original link
overflow is the processing of overflow content, there are four attribute values visible, hidden, scroll, auto, and overflow-x, overflow-y can be set respectively, it should be noted that: when overflow-x or overflow-y is set separately When it is not visible, another attribute value is auto by default, such as [Example 5]. Let's first introduce its four attribute values.
1.visible (default value): make the overflow content displayed [Example 1]
2.hidden: hide the overflow content without scrolling [Example 2]
3.scroll: Hide the content of the overflow container, and the overflow content can be displayed by scrolling [Example 3]
4. auto: There is no difference from scroll (that is, there are subtle differences between scroll and auto. auto only displays the scroll bar when the content overflows, and does not display if the content does not overflow. It is a bit "smart", and scroll displays even if the content does not overflow Scroll bar) [Example 4]
[Example 1] visible
Effect
the code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
border: 1px solid #333;
border-radius: 10px;
color: #424242;
overflow: visible;
}
.content {
width: 250px;
height: 250px;
padding: 20px;
border: 1px solid #33f;
border-radius: 10px;
background-color: rgba(200, 255, 200, 0.5);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<p>
我们在之前的一本著作中研究群体观念对各国发展的影响时已经指出，每一种文明都是少数几个基本观念的产物，这些观念很少能够得到革新。我们指出，这些观念在群体的心中是多么稳固，要想对这一过程产生影响是多么困难，以及这些观念一旦实现之后所拥有的力量。最后我们又说，历史的波动就是这些基本观念的改变所引发的结果。
</p>
</div>
</div>
</body>
</html>[Example 2] hidden: set the attribute value to hidden
Effect
[Example 3] scroll: set the attribute value to scroll
Effect
[Example 4] auto: set the attribute value to auto
Effect
[Example 5] Set overflow-x: hidden, do not set overflow-y;
Effect
The author noticed that even if overflow-y is set to visible at this time, the horizontal direction cannot be hidden, the vertical direction is displayed, and the vertical direction is still auto;