Explicación detallada del atributo de desbordamiento
enlace original
desbordamiento es el procesamiento del contenido de desbordamiento, hay cuatro valores de atributo visible, oculto, desplazamiento, automático y desbordamiento-x, desbordamiento-y se puede configurar respectivamente, debe tenerse en cuenta que: cuando desbordamiento-x o desbordamiento-y se establece por separado Cuando no está visible, otro valor de atributo es automático de forma predeterminada, como [Ejemplo 5]. Primero, presentemos sus cuatro valores de atributo.
1.visible (valor predeterminado): hacer que se muestre el contenido de desbordamiento [Ejemplo 1]
2. oculto: ocultar el contenido de desbordamiento sin desplazarse [Ejemplo 2]
3. Desplazamiento: oculta el contenido del contenedor de desbordamiento, y el contenido de desbordamiento se puede mostrar desplazándose [Ejemplo 3]
4. automático: no hay diferencia con el desplazamiento (es decir, hay diferencias sutiles entre el desplazamiento y el automático. automático solo muestra la barra de desplazamiento cuando el contenido se desborda, y no se muestra si el contenido no se desborda. Es un poco " inteligente", y las pantallas de desplazamiento incluso si el contenido no se desborda Barra de desplazamiento) [Ejemplo 4]
[Ejemplo 1] visible
Efecto
el código
<!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>[Ejemplo 2] oculto: establezca el valor del atributo en oculto
Efecto
[Ejemplo 3] desplazamiento: establezca el valor del atributo para desplazarse
Efecto
[Ejemplo 4] automático: establezca el valor del atributo en automático
Efecto
[Ejemplo 5] Establecer desbordamiento-x: oculto, no establecer desbordamiento-y;
Efecto
El autor notó que incluso si overflow-y está configurado como visible en este momento, la dirección horizontal no se puede ocultar, se muestra la dirección vertical y la dirección vertical sigue siendo automática;