Vertiefendes Verständnis des CSS-Überlaufs: versteckt, scrollbar, sichtbar

Wenn der Inhalt während des Layouts die Größe des Felds überschreitet, können Sie den Inhalt über das Objekt hinaus mit der CSS-Eigenschaft Overflow ausblenden. Als Nächstes erfahren Sie mehr darüber CSS-Überlaufstil lernen.

Überlauf-Syntaxwert

Überlauf: sichtbar |. Selbstverständlich kann der Überlauf unabhängig mit X (Überlauf) eingestellt werden -x) und Der Wert und die Anwendung des Bildlaufleistenstils in Y-Richtung (Überlauf-Y) stimmen mit der Verwendungsstruktur der Überlaufsyntax überein.

2. Erklärung des Überlaufparameterwerts

sichtbar: Den Inhalt nicht ausschneiden und keine Bildlaufleisten hinzufügen. Wenn dieser Standardwert explizit deklariert wird, wird das Objekt auf die Größe des Fensters oder Rahmens zugeschnitten, der das Objekt enthält. Und die Einstellung des Clip-Attributs ist ungültig.

Auto: Dies ist der Standardwert des Körperobjekts und des Textbereichs. Schneiden Sie den Inhalt aus und fügen Sie bei Bedarf Bildlaufleisten hinzu. Der Standardwert von DIV ist ebenfalls dieser Wert, Sie können ihn jedoch bei Bedarf festlegen.

Ausgeblendet: Inhalte, die die Objektgröße überschreiten, werden nicht angezeigt.

Scrollen: Bildlaufleiste immer anzeigen

3. Spezielle Erklärung zum Überlauf

Abrufen oder Festlegen, wie der Inhalt verwaltet werden soll, wenn der Inhalt des Objekts überschritten wird seine angegebene Höhe und Breite.

Wenn Sie das Textarea-Objekt auf den ausgeblendeten Wert setzen, werden seine Bildlaufleisten ausgeblendet.

Wenn für Tabellen das Attribut „table-layout“ auf „fixed“ gesetzt ist, unterstützt das td-Objekt das Attribut „overflow“ mit dem Standardwert „hidden“. Bei der Einstellung „Ausgeblendet“, „Scrollen“ oder „Automatisch“ werden Inhalte, die die TD-Größe überschreiten, abgeschnitten. Bei der Einstellung „Sichtbar“ wird zusätzlicher Text in die Zellen rechts oder links überlaufen (je nach Einstellung der Richtungseigenschaft). Diese Eigenschaft ist auf MAC-Plattformen ab IE5 verfügbar.

4. Konzentrieren Sie sich auf den Lernüberlauf

Überlauf: sichtbar Dieser Stil ermöglicht das Ausblenden der Bildlaufleiste, kann aber mit der Maus nach oben und unten verschoben werden.

Overflow:hidden Versteckt den Inhalt des Objekts, das die festgelegte Breite und Höhe überschreitet.

Overflow:scroll Dieser Stil führt dazu, dass die Bildlaufleiste angezeigt wird, unabhängig davon, ob der Inhalt die Höhe überschreitet oder Breite.

5. Overflow:hidden und Overflow:scroll-Übungen

Wir verwenden die gleichen Breiten- und Höheneinstellungen, eine zum Ausblenden von Inhalten außerhalb der Breite und Höhe und eine zum Zeigen Sie die Bildlaufleiste an. Wir fügen den beiden Objekten im Fall einen CSS-Rahmen hinzu.

CSS-Code:

.divcss5-hidden,.divcss5-scroll{width:300px; height:100px;line-height:25px; border:1px solid #333} 
.divcss5-hidden{overflow:hidden; height:50px} 
.divcss5-scroll{overflow:scroll; margin-top:10px}

HTML-Code:

<div class="divcss5-hidden"> 
隐藏超出的内容但不显示滚动,divcss5的overflow:hidden测试示范 
案例，设置了高和宽后对象，内容多不超出对象 
</div> 
<div class="divcss5-scroll"> 
<img src="http://www.divcss5.com/uploads/allimg/130219/1_130219231214_1.jpg" /> 
</div>

Zusammenfassung: Der Überlauf-CSS-Stil wird oft verwendet, um die Bildlaufleiste der Anzeige auszublenden, und kann auch Objekte ausblenden, die die Größe überschreiten , Breite und Höhe. Es spielt keine Rolle, ob Sie das Wort buchstabieren können. Grundlegende grammatikalische Strukturen können Sie schnell eingeben Hilfe der DW-Software.

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis des CSS-Überlaufs: versteckt, scrollbar, sichtbar. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!