Einige Tipps zum Überlaufattribut in CSS, Einführung in das Überlaufattribut

In diesem Kapitel geben wir Ihnen einige Tipps zum Überlaufattribut, die für Freunde in Not hilfreich sein können.

1: Grundeigenschaften des Überlaufs

Die Grundeigenschaften des Überlaufs sind: sichtbar, ausgeblendet, scrollen, automatisch, erben, Überlauf-x und Überlauf-y

Setzen Sie overflow-x und overflow-y auf denselben Wert, was einem Überlauf entspricht. Wenn sie unterschiedlich sind, wird einem von ihnen „visibel, auto“ und dem anderen „visibel, auto, hide“ zugewiesen. wird auf automatisch zurückgesetzt.

Die Prämisse der Rolle

1. Nicht-Anzeige: Inline-Ebene!

2. Größenbeschränkungen entsprechend der Ausrichtung, Breite/Höhe/maximale Breite/maximale Höhe/absolute Dehnung

Überlauf: die wunderbare Verwendung von Visibel

Unter dem IE7-Browser gilt: Je mehr Text vorhanden ist, desto größer ist der Füllraum auf beiden Seiten der Schaltfläche. CSS-Stil-Überlauf zu allen Schaltflächen hinzufügen: sichtbar

2: Überlauf und Bildlaufleiste

Bedingungen für das Erscheinen der Bildlaufleiste

1.overflow: auto/overflow:scroll Einige Elemente haben ihre eigenen Bildlaufleisten 3c76a0ed9b319bfdd2489c7a3a97dda1

body/html und Bildlaufleisten

Egal welcher Browser. Die Standard-Bildlaufleisten stammen alle aus HTML und nicht aus dem Body-Tag

ie8+ html{overflow:auto}

Wenn wir also die Standard-Bildlaufleiste von der Seite entfernen möchten, brauchen wir nur:

html{overflow:hidden}

body/html und scrollbar-js Kompatibel mit der Scrollhöhe

, kann die Schreibmethode

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

im Chrome-Browser herausgescrollt werden.

Breite der Bildlaufleiste

Feldbreite (mit Bildlaufleiste) - Feldbreite = Bildlaufleistenbreite

IE Firefox Chrome sind beide 17 Pixel.

Horizontales Zentrumssprungproblem

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

100vw - Browserbreite; 100 % - verfügbare Inhaltsbreite

Benutzerdefiniertes Scrollbar-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; }

Benutzerdefinierte Bildlaufleiste-IE

Sie können ein benutzerdefiniertes Bildlauf-Plug-in verwenden

IOS-nativer Bildlauf-Rückrufeffekt

-webkit-overflow-scrolling:touch;

Drei : Überlauf und BFC

Clear Float, adaptives Layout usw.

BFC-Blockformatierungskontext Formatierungskontext auf Blockebene

Die Verzauberung der Seite, egal wie die internen Elemente geworfen werden, sie haben keinen Einfluss auf die Außenseite.

Überlauf und BFC

1. Clear Floating-Effekte

2. Zwei Spalten von Adapt zum Layout

Internes Floating hat keine Auswirkung

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

Randdurchdringungsproblem vermeiden

Setze overflow:scroll, overflow:auto, overflow:hidden

Warum gibt es diese Funktion?

Adaptives Layout unter fließenden Eigenschaften

1. Links schwebend, rechts normal

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

2. Links schwebend, rechter Rand

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

3 . Links schwebend, rechts auffüllen

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

4. Links schwebend

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

Das Festlegen des Überlaufattributs auf das Div dient zum BFC des Elements. Wenn Sie Polsterung für ein flüssiges adaptives Layout verwenden, dürfen Sie sich nicht anpassen Schicht BFC.

Verhalten sich alle BFC-Attribute so?

Ja, die spezifische Leistung variiert

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

Zweispaltiges adaptives Layout

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

Viertens: Überlauf und absolute Positionierung

Versteckter Fehler und Scroll-Korrektur

Überlauf:versteckter Fehler

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

Grund für den Fehler Absolut positionierte Elemente werden nicht immer durch das übergeordnete Überlaufattribut abgeschnitten, insbesondere wenn der Überlauf zwischen dem absolut positionierten Element und seinem enthaltenden Block

liegt Der enthaltende Block bezieht sich auf das mit „position:relative/absolute/fixed“ deklarierte übergeordnete Element. Ohne ihn gilt das Körperelement

So vermeiden Sie eine Ungültigmachung
1. Das Überlaufelement selbst wird zu einem umschließenden Block

2. Die untergeordneten Elemente des Überlaufelements werden zu einem umschließenden Block

3. Jede zulässige Transformationsanweisung wird als umschließender Block behandelt

Der magische Effekt der Überlaufungültigmachung

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>

5: Stilausdruck, der auf Überlauf basiert

resize stretch

CSS3 verfügt über eine Eigenschaft namens resize, die die Größe von Elementen strecken kann.

.resize:sowohl horizontal als auch vertikal strecken

.resize:horizontal Nur in horizontaler Richtung strecken

resize:vertikal Nur in vertikaler Richtung strecken

Damit diese Deklaration funktioniert, darf der Überlaufattributwert des Elements jedoch nicht sichtbar sein!

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

Ein solcher Knopf kann den Dehnungseffekt erzielen.

Das Textfeld verfügt über ein eigenes Größenänderungsattribut, da das Textfeld standardmäßig überläuft: automatisch

Die Größe des Drag-Fishing-Bereichs zur Größenänderung des Textfelds beträgt 17*17 Pixel. Das heißt, die Größe der Bildlaufleiste

Ellipsentext läuft über und wird weggelassen

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

Sechs: Überlauf- und Ankerpunkttechnologie

Ankerpunktpositionierung Das Wesentliche: die Scrollhöhe des variablen Containers

Auslösung der Ankerpunktausrichtung 1. Ankerkette und Ankerelement in der URL-Adresse; 2. Das fokussierbare Ankerelement ist im Fokus

Die Rolle der Ankerpunktpositionierung
1. Schnelle Positionierung
2. Ankerpositionierung und Overflow-Tab-Technologie

Anwendungsszenario: Einzelseitenanwendung

Das obige ist der detaillierte Inhalt vonEinige Tipps zum Überlaufattribut in CSS, Einführung in das Überlaufattribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!