Warum verwenden wir Überlauf: versteckt;

Warum verwenden wir diese drei Eigenschaften in diesem Menü. Ich bin mir nicht sicher, warum wir diese drei Eigenschaften brauchen. Ich würde wirklich gerne die technische Seite davon wissen? Warum verwenden wir Überlauf: versteckt;

margin: 0; 
padding: 0; 
overflow: hidden;

HTML:

<ul> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Contact</a></li> 
    <li><a href="#about">About</a></li> 
</ul>

CSS:

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
}

Quelle

2016-04-25 Adrien

Versuchen Sie, sie zu entfernen, und Sie werden sehen, warum sie verwendet werden und was ihre Auswirkungen auf das Layout. – Aziz

@adrien, Ihre angenommene Antwort ist schrecklich, weil sie nicht beantwortet, warum die Stile in Bezug auf Ihr Beispiel oben verwendet werden - es gibt nur einige allgemeine Informationen darüber, was jede Eigenschaft tun würde (und einige Fehlinformationen über Polsterung und Styling) . Ich würde mit Vincent Gs Antwort gehen, da es Ihnen sagt, warum jede der Eigenschaften in Ihrem Beispiel verwendet werden – Pete

Die Standardwerte für Padding und Rand sind null (vom Browser abhängig). Also ich denke nicht, dass es einen Unterschied geben würde, wenn Sie sie entfernen.

Überlauf: Versteckt ist eine Eigenschaft, die jeden Text aus Ihrem div als versteckt macht, d. H. Es wird nicht auf dem Bildschirm angezeigt und wird abgeschnitten.

Überlauf: auto wird Scrollbalken erscheinen, wenn der Text aus Ihrem div. Geht.

Es gibt eine Menge mehr Option verfügbar ist gehen Sie bitte über den folgenden Link, um weitere Informationen ::

link

Quelle

2016-04-25 07:36:18 Abhishek

der Standardwert von Padding/Rand von ul Element sind nicht 0 aber 40px je nach Browser: https: //developer.mozilla. org/de-DE/docs/Web/CSS/CSS_Lists_and_Counters/Konsistente_Liste_Einleitung # Finding_Consistency –

@VincentG - Danke für die Info. aktualisierte meine Antwort. – Abhishek

Ich denke, im obigen Beispiel wird der versteckte Overflow als eine Art klare Lösung verwendet, anstatt irgendetwas zu verbergen. Und die Standardwerte für den Rand und das Auffüllen von "ul" sind nicht 0 - es wird immer eine Art von linkem Padding oder Rand haben, um das Aufzählungszeichen zu zeigen, deshalb sind "margin: 0" und "padding: 0" verwendet - um die Standardstile des Browsers zurückzusetzen. Diese Antwort beantwortet die Frage wirklich nicht in dem Kontext, in dem sie gestellt wurde – Pete

Für den Überlauf: versteckt Teil, ich denke, die beste Antwort in diesem Beispiel aus w3schools ist: overflow hidden example Was passiert, ist, dass alles, was kann nicht in den zulässigen Platz passen wird abgeschnitten und wird in keiner Weise gezeigt.

Der Unterschied zwischen Rand und Padding wird hier im Stackoverflow in this question erklärt.

Quelle

2016-04-25 07:33:17 Linkan

ul Element hat einen Standard margin/padding von 40px auf dem Browser abhängig Sie sind. So setzen diese Eigenschaften ul:

ul { 
    margin: 0; 
    padding: 0; 
}

Überschreiben Sie das Standardverhalten von auf Browsern. Siehe Dokumentation hier darauf: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation#Finding_Consistency

Dann wird die overflow:hidden Eigenschaft Gebrauch ist wegen der schwebenden li Elemente innerhalb des ul Element. Hier ist eine Erklärung von der Folling Dokumentation

Mit der Überlauf-Eigenschaft mit einem Wert anders sichtbar (sein Standard) wird einen neuen Block-Formatierungskontext erstellen. Dies ist technisch notwendig - wenn ein Float mit dem scrollenden Element geschnitten würde, würde es zwangsweise den Inhalt umschreiben. Der Umbruch würde nach jedem Scroll-Schritt passieren , was zu einem langsamen Scrollen Erfahrung.

Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Quelle

2016-04-25 07:56:00

Dies ist bei weitem die beste Antwort auf die eigentliche Frage! – Pete

Beachten Sie, dass overflow: hidden wird auch zum Löschen von Schwimmern in Ihrem Element verwendet. Zumindest mache ich das :)

, d.h.

ul { 
    overflow: hidden; 
} 

li { 
    float: left; 
}

https://jsfiddle.net/jff5pnx7/

Quelle

2016-04-25 08:55:19 Ozrix

Warum verwenden wir Überlauf: versteckt;

Antwort

Verwandte Themen