Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

yulia
Freigeben: 2018-09-12 17:44:52
Original
4025 Leute haben es durchsucht

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}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage