Table of Contents
1. overflow definition and attribute values
2. Attribute effect display
2.1 overflow: visible; do not crop the part beyond the box
2.2 overflow: hidden; hide the content beyond the box; clear the float
2.3 overflow: scroll scroll bar
2.3.1 overflow-y: auto; overflow-x: hidden;
2.3.2 overflow-x: auto; overflow-y: hidden;
2.3.3 overflow: scroll forces scroll bar
2.4 overflow: inherit inherits the overflow of the parent element
PS
1. overflow definition and attribute value
The overflow attribute specifies what happens when content overflows
overflow has the following attribute values:
1.overflow: visible; do not crop the part beyond the box
2.overflow:hidden; hide the content beyond the box
3.overflow-x:scroll; force the scroll bar to appear on the horizontal axis
4.overflow-y:scroll forces the scroll bar to appear on the vertical axis
5.overflow: scroll has scroll bars on both the x-axis and y-axis
6.overflow:auto; automatically determine whether a scroll bar appears
7.overflow: inherit; inherit the value of the overflow attribute from the parent element
In the overflow attribute value, visible and hidden are opposite, and scroll and auto are opposite. Inherent inherits the overflow attribute value of the parent element, and the default is scroll.
2. Attribute effect display
2.1 overflow: visible; do not crop the part beyond the box
overflow: visible does not modify the attribute style
Code:
<style>
.a{
width: 200px;
height: 100px;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="a">
We Chinese often say that those with deep desires have shallow secrets, and those with shallow desires have deep secrets. That is to say, if a person blindly indulges in sensual enjoyment, his wisdom must be very shallow.
Only those who are detached from the bustling world of sounds and colors and can meditate quietly can have the great wisdom to grasp the complicated life and the infinite universe. But shallowness or wisdom is entirely within yourself.
</div>
</body>
2.2 overflow: hidden; hide the content beyond the box; clear the float
overflow: hidden will completely hide the part beyond the box, and can also be used to clear floats within child elements
First let’s take a look at his hidden effects
You can see that this attribute completely hides the text beyond the box.
css
<style>
.a{
width: 200px;
height: 100px;
background-color: aliceblue;
overflow: hidden;
}
</style>
Clear float:
Code:
<style>
.a{
width: 200px;
background-color: rgb(42, 132, 210);
}
.p1{
background-color: aqua;
float: left;
}
.p2{
background-color: azure;
float: left;
}
.p3{
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="a">
<p class="p1">Hello</p>
<p class="p2">Hello</p>
<p class="p3">Hello</p>
</div>
</body>
Original code effect:
The height of the parent element was not set in the original effect, so the height collapsed. This problem was solved when overflow: hidden was added.
css:
.a{
width: 200px;
background-color: rgb(42, 132, 210);
overflow: hidden;
}
.p1{
background-color: aqua;
float: left;
}
.p2{
background-color: azure;
float: left;
}
.p3{
background-color: red;
float: left;
}
2.3 overflow: scroll scroll bar
2.3.1 overflow-y: auto; overflow-x: hidden;
Determine whether there is a scroll bar on the y-axis, and hide the scroll bar on the x-axis
css
<style>
.a{
width: 200px;
height: 100px;
background-color: aliceblue;
overflow-y: auto;
overflow-x: hidden;
}
</style>
2.3.2 overflow-x: auto; overflow-y: hidden;
Here, because the x-axis does not exceed the box, there is no need for scroll bars, and auto does not display scroll bars.
css
<style>
.a{
width: 200px;
height: 100px;
background-color: aliceblue;
overflow-x: auto;
overflow-y: hidden;
}
</style>
2.3.3 overflow: scroll to force scroll bar
A scroll bar will appear regardless of whether the content exceeds the limit.
css
<style>
.a{
width: 200px;
height: 100px;
background-color: aliceblue;
overflow:scroll
}
</style>
2.4 overflow: inherit to inherit the overflow of the parent element
You can see that there are two scroll bars in the style below. The internal style inherits from its parent element.
Code:
<style>
.a {
width: 200px;
height: 100px;
background-color: aliceblue;
overflow: scroll
}
.b {
overflow: inherit;
}
</style>
</head>
<body>
<div class="a">
We Chinese often say
<div class="b">Those who have deep desires have shallow secrets, and those who have shallow desires have deep secrets. That is to say, if a person blindly indulges in sensual enjoyment, his wisdom must be very shallow.
Only those who are detached from the bustling world of sounds and colors and can meditate quietly can have the great wisdom to grasp the complicated life and the infinite universe. But shallowness or wisdom is entirely within yourself. </div>
</div>
</body>
ps
If there is anything that is not well written, please give me some pointers. I would be honored!