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 <p></p> <p>body/html et barres de défilement <strong></strong></p> quel que soit le navigateur. Les barres de défilement par défaut sont toutes en HTML au lieu de la balise body <p></p><pre class='brush:php;toolbar:false;'>ie8+ html{overflow:auto}</pre>Donc, si nous voulons supprimer la barre de défilement par défaut de la page, nous avons seulement besoin de : <p> </p><pre class='brush:php;toolbar:false;'>html{overflow:hidden}</pre>body/html et Scroll bar-js et scroll height <p></p> sont compatibles avec la méthode d'écriture <p></p><pre class='brush:php;toolbar:false;'> var st = document.body.scrollTop || document.documentElement.scrollTop overflow的padding-bottom缺失现象 .box{width:400px;height:100px;padding:100px 0; overfow:auto;}</pre> Le bas peut défiler vers le bas dans le navigateur Chrome. <p></p> <p>Largeur de la barre de défilement<strong></strong></p>Largeur de la boîte (avec barre de défilement) - largeur de la boîte = largeur de la barre de défilement<p></p> IE Firefox Chrome sont tous deux de 17 pixels. <p></p> <p>Problème de saut de centre horizontal<strong></strong></p><pre class='brush:php;toolbar:false;'>修复方法 1.html{overflow-y:scroll;} 2. .container{padding-left:calc(100vw-100%);}</pre> 100vw - largeur du navigateur 100% - largeur du contenu disponible<p></p> <p> Barre de défilement personnalisée -webkit <strong></strong></p><pre class='brush:php;toolbar:false;'> 整体部分 ::-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; }</pre> Barre de défilement personnalisée -IE<p></p>Vous pouvez utiliser un plug-in de défilement personnalisé<p></p>Effet de rappel de défilement natif IOS<p></p><pre class='brush:php;toolbar:false;'>-webkit-overflow-scrolling:touch;</pre><p>Trois : débordement et BFC<strong></strong></p>Flotteurs clairs, mise en page adaptative, etc. <p></p>Contexte de formatage du bloc BFC Contexte de formatage au niveau du bloc <p></p>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. <p></p> <p>débordement et BFC<strong></strong></p>1. Effacer les effets flottants <p></p>2 Éviter les problèmes de pénétration de marge <p></p>Deux colonnes d'Adapt. à la mise en page <p></p>Le flottement interne n'a aucun effet<p></p><pre class='brush:php;toolbar:false;'>.clearfix{*zoom:1;} .clearfix:after{centent:&#39;&#39;;display:table;clear:both;}</pre>Éviter les problèmes de pénétration de la marge<p></p>Définir le débordement : défilement, le débordement : auto, le débordement : caché<p> </p>Pourquoi a-t-il cette fonctionnalité ? <p><strong></strong> Disposition adaptative sous caractéristiques fluides </p> <p> 1. Flottant à gauche, normal à droite </p> <p></p> 2. Flottant à gauche, marge à droite <pre class='brush:php;toolbar:false;'>.left{float:left;width:128px;} .right{min-height:190px;background-color:#beceeb}</pre><p> </p>3. Flottant à gauche, remplissage à droite<pre class='brush:php;toolbar:false;'>.left{float:left;width:128px;} .right{min-height:190px;margin-left:150px;background-color:#beceeb}</pre><p></p>4. Flottant à gauche<pre class='brush:php;toolbar:false;'>.left{float:left;width:128px;} .right{min-height:190px;padding-left:150px;background-color:#beceeb}</pre><p></p> 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. <pre class='brush:php;toolbar:false;'>.left{float:left;width:128px;} .right{min-height:190px;overflow:hidden;background-color:#beceeb}</pre><p>Tous les attributs BFC se comportent-ils comme ça ? </p> <p> oui En raison de ses propres caractéristiques, les performances spécifiques varient </p> <p></p>Mise en page adaptative à deux colonnes<pre class='brush:php;toolbar:false;'> overflow:hidden; 自适应，单溢出不可见 限制应用场景 float + float 包裹性+破坏性 无法自适应，块状浮动布局 position:absolute 脱离文档流，自娱自乐 display:inline-block 包裹性，无法自适应 display:table-cell 包裹性，但天生无溢出特性，绝对宽度也能自适应。 只有overflow:hidden,display:inline-block,display:table-cell能使元素BFC化</pre><.><p></p>Quatre : débordement et positionnement absolu<pre class='brush:php;toolbar:false;'> .cell{ display:table-cell; width:2000px; //2000保证比父元素大 *display:inline-block;*width:auto; //IE7-伪BFC特性 }</pre><p><strong>Panne cachée et correction du défilement</strong></p> <p>débordement :panne cachée</p> <p><strong> </strong>Raison de l'échec</p> 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 <pre class='brush:php;toolbar:false;'>.overflow-hidden{ width:300px; height:200px; border:5px solid #333; overflow:auto } img{postion:absolute;}</pre> Le bloc contenant fait référence à l'élément parent déclaré avec "position:relative/absolute/fixed". Sans lui, l'élément body <p><br>Comment éviter l'invalidation<br> 1.L'élément de débordement lui-même devient un bloc contenant </p> 2. Les éléments enfants de l'élément de débordement deviennent un bloc conteneur <p> 3. Toute instruction de transformation légale est traitée comme un bloc conteneur <br><br>L'effet magique de l'échec du débordement<br></p> <p></p>5 : Styles qui reposent sur les performances de débordement <pre class='brush:php;toolbar:false;'>h0{height:0;} .ovh{overflow:hidden;} .tr{text-align:right;} .abs{position:absolute;} <div class="h0 ovh tr"> <img class="abs ml10 mt30 lazy" src="/static/imghwm/default1.png" data-src="" class=" alt="Quelques conseils sur l'attribut overflow en CSS, introduction à l'attribut overflow" ></img> </div></pre><p><strong></strong> étirement de redimensionnement </p> <p><strong> CSS3 a une propriété appelée resize, qui peut étendre la taille de l'élément. </strong></p> .resize: les deux s'étirent horizontalement et verticalement; <p></p> .resize: horizontal s'étire uniquement dans le sens horizontal <p></p> resize: vertical s'étire uniquement dans le sens vertical <p></p> Cependant, pour que cette déclaration fonctionne, la valeur de l'attribut overflow de l'élément ne peut pas être visible ! <p></p> <p> Un tel bouton peut obtenir l'effet d'étirement. </p><pre class='brush:php;toolbar:false;'><button style="resize:both;overflow:hidden">按钮</button></pre>Le champ de texte a son propre attribut de redimensionnement, car le champ de texte déborde par défaut : auto<p></p> 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 <p></p> le texte des points de suspension déborde et est omis <p></p> <p></p> Six : technologie de débordement et d'ancrage <pre class='brush:php;toolbar:false;'>text-overflow:ellipsis <button style="width:200px;white-space:norwrap;text-overflow:ellipsis;overflow:hidden"> 这是一个按钮，宽度仅200像素 </button></pre><p><strong></strong> Ancre L'essence du positionnement du point : la hauteur de défilement du conteneur variable</p> <p><strong>déclenchement de l'alignement du point d'ancrage</strong> 1. Chaîne d'ancrage et élément d'ancrage dans l'adresse URL </p> 2. L'élément d'ancrage focalisable est mis au point <p></p> <p>Le rôle du positionnement du point d'ancrage<br> 1. Positionnement rapide<br> 2. Technologie de positionnement d'ancre et d'onglet de débordement </p> <p> Scénario d'application : application d'une seule page </p> <p><br></p></.>

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!