Quelques conseils sur l'attribut overflow en CSS, introduction à l'attribut overflow

Dans ce chapitre, nous vous apporterons quelques conseils sur l'attribut de débordement, qui ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

1 : Propriétés de base du débordement

Les propriétés de base du débordement sont : visible, caché, défilement, auto, héritage, débordement-x et débordement-y

Définissez overflow-x et overflow-y sur la même valeur, ce qui équivaut à overflow. S'ils sont différents, l'un d'eux se voit attribuer visible, auto et l'autre se voit attribuer visiblebel, auto, caché. sera réinitialisé sur automatique.

La prémisse du rôle

1. Non-affichage : niveau en ligne !

2. Restrictions de taille correspondant à l'orientation, largeur/hauteur/largeur-max/hauteur-max/étirement absolu

débordement : la merveilleuse utilisation du visibel

Sous le navigateur IE7, plus il y a de texte, plus l'espace de remplissage sera grand de part et d'autre du bouton. Ajouter un débordement de style CSS à tous les boutons : visible

2 : débordement et barre de défilement

Conditions pour que la barre de défilement apparaisse

1.overflow : auto/overflow:scroll Certains éléments ont leurs propres barres de défilement 100db36a723c770d327fc0aef2ce13b1 4750256ae76b6b9d804861d8f69e79d3

body/html et barres de défilement

quel que soit le navigateur. Les barres de défilement par défaut sont toutes en HTML au lieu de la balise body

ie8+ html{overflow:auto}

Donc, si nous voulons supprimer la barre de défilement par défaut de la page, nous avons seulement besoin de :

html{overflow:hidden}

body/html et Scroll bar-js et scroll height

sont compatibles avec la méthode d'écriture

 var st = document.body.scrollTop || document.documentElement.scrollTop
 overflow的padding-bottom缺失现象
.box{width:400px;height:100px;padding:100px 0; overfow:auto;}

Le bas peut défiler vers le bas dans le navigateur Chrome.

Largeur de la barre de défilement

Largeur de la boîte (avec barre de défilement) - largeur de la boîte = largeur de la barre de défilement

IE Firefox Chrome sont tous deux de 17 pixels.

Problème de saut de centre horizontal

修复方法 
1.html{overflow-y:scroll;}
2. .container{padding-left:calc(100vw-100%);}

100vw - largeur du navigateur 100% - largeur du contenu disponible

Barre de défilement personnalisée -webkit

 整体部分 ::-webkit-scrollbar 
	两端按钮 ::-webkit-scrollbar-button 
	外层轨道 ::-webkit-scrollbar-track 
	内层轨道 ::-webkit-scrollbar-track-piece 
	滚动滑块 ::-webkit-scrollbar-thumb 
	边角 ::-webkit-scrollbar-corner 
	实际常用 
	::-webkit-scrollbar{//宽度 width:8px; height:8px; } 
	::-webkit-scrollbar-thumb{//拖动条 background-color:rgba(0,0,0,.3); border-radius : 6px; } 
	::-webkit-scrollbar-track{//背景槽 background-color:#ddd; border-radius:6px; }

Barre de défilement personnalisée -IE

Vous pouvez utiliser un plug-in de défilement personnalisé

Effet de rappel de défilement natif IOS

-webkit-overflow-scrolling:touch;

Trois : débordement et BFC

Flotteurs clairs, mise en page adaptative, etc.

Contexte de formatage du bloc BFC Contexte de formatage au niveau du bloc

L'enchantement de la page, peu importe la façon dont les éléments internes sont lancés, ils n'affecteront pas l'extérieur.

débordement et BFC

1. Effacer les effets flottants

2 Éviter les problèmes de pénétration de marge

Deux colonnes d'Adapt. à la mise en page

Le flottement interne n'a aucun effet

.clearfix{*zoom:1;}
.clearfix:after{centent:'';display:table;clear:both;}

Éviter les problèmes de pénétration de la marge

Définir le débordement : défilement, le débordement : auto, le débordement : caché

Pourquoi a-t-il cette fonctionnalité ?

Disposition adaptative sous caractéristiques fluides

1. Flottant à gauche, normal à droite

2. Flottant à gauche, marge à droite

.left{float:left;width:128px;}
.right{min-height:190px;background-color:#beceeb}

3. Flottant à gauche, remplissage à droite

.left{float:left;width:128px;}
.right{min-height:190px;margin-left:150px;background-color:#beceeb}

4. Flottant à gauche

.left{float:left;width:128px;}
.right{min-height:190px;padding-left:150px;background-color:#beceeb}

Définir l'attribut de débordement sur le div consiste à BFC l'élément et à utiliser le remplissage pour une adaptation fluide. Lors de la mise en page, ne laissez jamais la couche adaptative devenir BFC.

.left{float:left;width:128px;}
.right{min-height:190px;overflow:hidden;background-color:#beceeb}

Tous les attributs BFC se comportent-ils comme ça ?

oui En raison de ses propres caractéristiques, les performances spécifiques varient

Mise en page adaptative à deux colonnes

 overflow:hidden;      自适应，单溢出不可见 限制应用场景
 float + float 包裹性+破坏性 无法自适应，块状浮动布局
position:absolute 脱离文档流，自娱自乐
display:inline-block 包裹性，无法自适应
display:table-cell 包裹性，但天生无溢出特性，绝对宽度也能自适应。
只有overflow:hidden,display:inline-block,display:table-cell能使元素BFC化

<.>

Quatre : débordement et positionnement absolu

 .cell{
  display:table-cell; width:2000px; //2000保证比父元素大
  *display:inline-block;*width:auto; //IE7-伪BFC特性
 }

Panne cachée et correction du défilement

débordement :panne cachée

Raison de l'échec

Les éléments en position absolue ne sont pas toujours tronqués par l'attribut de débordement parent, en particulier lorsque le débordement se situe entre l'élément en position absolue et son bloc contenant

.overflow-hidden{
    width:300px;
    height:200px;
    border:5px solid #333;
    overflow:auto
}
img{postion:absolute;}

Le bloc contenant fait référence à l'élément parent déclaré avec "position:relative/absolute/fixed". Sans lui, l'élément body

Comment éviter l'invalidation
1.L'élément de débordement lui-même devient un bloc contenant

2. Les éléments enfants de l'élément de débordement deviennent un bloc conteneur

3. Toute instruction de transformation légale est traitée comme un bloc conteneur

L'effet magique de l'échec du débordement

5 : Styles qui reposent sur les performances de débordement

h0{height:0;}
.ovh{overflow:hidden;}
.tr{text-align:right;}
.abs{position:absolute;}
<div class="h0 ovh tr">
    <img src="" class="abs ml10 mt30"></img>
</div>

étirement de redimensionnement

CSS3 a une propriété appelée resize, qui peut étendre la taille de l'élément.

.resize: les deux s'étirent horizontalement et verticalement;

.resize: horizontal s'étire uniquement dans le sens horizontal

resize: vertical s'étire uniquement dans le sens vertical

Cependant, pour que cette déclaration fonctionne, la valeur de l'attribut overflow de l'élément ne peut pas être visible !

Un tel bouton peut obtenir l'effet d'étirement.

<button style="resize:both;overflow:hidden">按钮</button>

Le champ de texte a son propre attribut de redimensionnement, car le champ de texte déborde par défaut : auto

La taille de la zone de pêche par traînée de redimensionnement du champ de texte est de 17*17 pixels. Autrement dit, la taille de la barre de défilement

le texte des points de suspension déborde et est omis

Six : technologie de débordement et d'ancrage

text-overflow:ellipsis
<button style="width:200px;white-space:norwrap;text-overflow:ellipsis;overflow:hidden">
  这是一个按钮，宽度仅200像素
</button>

Ancre L'essence du positionnement du point : la hauteur de défilement du conteneur variable

déclenchement de l'alignement du point d'ancrage 1. Chaîne d'ancrage et élément d'ancrage dans l'adresse URL

2. L'élément d'ancrage focalisable est mis au point

Le rôle du positionnement du point d'ancrage
1. Positionnement rapide
2. Technologie de positionnement d'ancre et d'onglet de débordement

Scénario d'application : application d'une seule page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!