Maison  >  Article  >  interface Web  >  Compréhension approfondie du débordement CSS

Compréhension approfondie du débordement CSS

巴扎黑
巴扎黑avant
2017-06-09 14:05:563547parcourir

Mots précédents

Lorsqu'un élément est fixé à une certaine taille, mais que le contenu ne peut pas tenir dans l'élément. À ce stade, vous pouvez utiliser l'attribut overflow pour contrôler cette situation

Définition

débordement débordement

Valeur : visible | caché | défilement | auto | hériter

Valeur initiale : visible

S'applique à : éléments de niveau bloc, éléments de remplacement, cellules de tableau

Héritage : Aucun

[Remarque] À l'exception du navigateur IE7, les autres navigateurs ne prennent pas en charge la définition de l'attribut overflow pour l'élément table-cell. Les navigateurs Firefox et IE11 ne prennent pas en charge la définition de l'attribut overflow pour les éléments enfants de l'élément table-cell qui sont définis sur une hauteur de 100 %

overflow- X | overflow- y

Les attributs de overflow-x et overflow-y étaient à l'origine des attributs développés indépendamment par le navigateur IE, et ont ensuite été adoptés et standardisés par CSS3. overflow-x est principalement utilisé pour définir le cisaillement du débordement de contenu horizontal, tandis que overflow-y est principalement utilisé pour définir le cisaillement du débordement de contenu vertical

[Note] Si les valeurs overflow-x et overflow-y la même chose équivaut à un débordement. Si les valeurs overflow-x et overflow-y sont différentes et que l'une des valeurs est explicitement définie sur visible ou n'est pas définie, la valeur par défaut est visible et l'autre valeur est une valeur non visible. La valeur visible sera réinitialisée à auto

Valeur : visible | caché | auto | héritage | no-content

Valeur initiale : visible

S'applique à : éléments de niveau bloc, éléments de remplacement, cellules de tableau

Héritage : Aucun

Attributs

visible

Le contenu de l'élément est également visible en dehors de la zone de l'élément

[Note 1] Le bloc conteneur de l'élément dans le navigateur IE6 sera étendu , ce qui fait que Can enveloppe son contenu excédentaire


.box{
    height: 200px;
    width: 200px;
    background-color: lightgreen;
}.in{
    width: 300px;
    height: 100px;
    background-color: lightblue;
}


<p class="box">
    <p class="in"></p></p>

L'image de gauche est un navigateur IE6, l'image sur le droit correspond aux autres navigateurs

[Note 2] Il y a un bug dans les boutons du navigateur IE7 (y compris

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer