Heim > Web-Frontend > CSS-Tutorial > Teilen Sie das Beispiel-Tutorial zum CSS-Überlauf

Teilen Sie das Beispiel-Tutorial zum CSS-Überlauf

零下一度
Freigeben: 2017-07-26 16:22:27
Original
4279 Leute haben es durchsucht

Schneiden Sie den linken/rechten Rand des Inhalts im div-Element ab – wenn er über den Inhaltsbereich des Elements hinausläuft:

div
{
overflow-x:hidden;
}
Nach dem Login kopieren

Browser-Unterstützung

Alle gängigen Browser unterstützen das overflow-x-Attribut.

Hinweis: Das overflow-x-Attribut funktioniert in IE8 und früheren Browsern nicht richtig.

Definition und Verwendung

Das Attribut overflow-x gibt an, ob die linken/rechten Ränder des Inhalts abgeschnitten werden sollen – wenn dieser über den Inhaltsbereich des Elements hinausläuft.

overflow-X |. overflow-y

Die Attribute von overflow-x und overflow-y waren ursprünglich unabhängig vom IE-Browser entwickelte Attribute. Es wurde später von CSS3 übernommen und standardisiert. overflow-x wird hauptsächlich zum Definieren der Scherung des horizontalen Inhaltsüberlaufs verwendet, während overflow-y hauptsächlich zum Definieren der Scherung des vertikalen Inhaltsüberlaufs verwendet wird

[Hinweis] Wenn die Werte overflow-x und overflow-y The Das Gleiche entspricht einem Überlauf. Wenn die Werte für Überlauf-x und Überlauf-y unterschiedlich sind und einer der Werte explizit auf sichtbar gesetzt oder nicht gesetzt ist, ist der Standardwert sichtbar und der andere Wert ist ein nicht sichtbarer Wert. Der sichtbare Wert wird auf automatisch zurückgesetzt.

Wert: sichtbar | an: Elemente auf Blockebene, Ersetzungselemente, Tabellenzellen

Vererbung: Keine

Attribute

sichtbar

Der Inhalt des Elements ist auch außerhalb der Elementbox sichtbar [Hinweis 1] Der enthaltende Block des Elements im IE6-Browser wird erweitert, sodass sein überschüssiger Inhalt umschlossen werden kann

Das Bild links zeigt den IE6-Browser und das Bild rechts zeigt andere Browser

.box{
    height: 200px;
    width: 200px;
    background-color: lightgreen;
}.in{
    width: 300px;
    height: 100px;
    background-color: lightblue;
}
Nach dem Login kopieren
<p class="box">
    <p class="in"></p></p>
Nach dem Login kopieren

[Anmerkung 2] Die Schaltflächen des IE7-Browsers ( einschließlich

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