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: sichtbar2: Überlauf und Bildlaufleiste
Bedingungen für das Erscheinen der Bildlaufleiste
1.overflow: auto/overflow:scroll Einige Elemente haben ihre eigenen Bildlaufleistenbody/html und Bildlaufleisten
Egal welcher Browser. Die Standard-Bildlaufleisten stammen alle aus HTML und nicht aus dem Body-Tag
ie8+ html{overflow:auto}html{overflow:hidden} var st = document.body.scrollTop || document.documentElement.scrollTop
overflow的padding-bottom缺失现象
.box{width:400px;height:100px;padding:100px 0; overfow:auto;}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%);}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; }-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;}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}.left{float:left;width:128px;}
.right{min-height:190px;margin-left:150px;background-color:#beceeb}.left{float:left;width:128px;}
.right{min-height:190px;padding-left:150px;background-color:#beceeb}.left{float:left;width:128px;}
.right{min-height:190px;overflow:hidden;background-color:#beceeb}overflow:hidden; 自适应，单溢出不可见 限制应用场景 float + float 包裹性+破坏性 无法自适应，块状浮动布局 position:absolute 脱离文档流，自娱自乐 display:inline-block 包裹性，无法自适应 display:table-cell 包裹性，但天生无溢出特性，绝对宽度也能自适应。 只有overflow:hidden,display:inline-block,display:table-cell能使元素BFC化
.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;}
So vermeiden Sie eine Ungültigmachung
1. Das Überlaufelement selbst wird 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>
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!
