Lösung für das Problem, dass die Div-Breite auf width:100% eingestellt ist und dann die Polsterung oder der Rand das übergeordnete Element überschreitet
|
Vorwort In diesem Artikel wird erläutert, wie Sie mit dem neuen CSS3-Attribut „box-sizing“ das Problem lösen, die Div-Breite auf 100 % einzustellen und dann die Polsterung oder den Rand jenseits des übergeordneten Elements festzulegen. Freunde in Not können sich darauf beziehen. Grammatik Box-Größe: Inhaltsbox|Rahmenbox|erben; Wert 1, Inhaltsbox Dies ist das von CSS2.1 angegebene Breiten- und Höhenverhalten. Die Breite und Höhe werden jeweils auf das Inhaltsfeld des Elements angewendet. Zusätzlich zur Breite und Höhe werden auch die Polsterung und der Rand des Elements gezeichnet. Wert 2, Rahmenbox Die für ein Element angegebene Breite und Höhe bestimmen die Rahmenbox des Elements. Das heißt, alle für das Element angegebenen Abstände und Ränder werden innerhalb der angegebenen Breite und Höhe gezeichnet. Die Inhaltsbreite und -höhe ergeben sich durch Subtrahieren der Rahmen- und Polsterungswerte von der eingestellten Breite bzw. Höhe. Wert 3: erben Gibt an, dass der Wert der Box-Sizing-Eigenschaft vom übergeordneten Element übernommen werden soll. Beispiel <!DOCTYPE html>
<html>
<Kopf>
<Stil>
Div.Container
{
Breite: 100 %;
Rand: 1em durchgezogen;
Polsterung: 15px;
Boxgröße: Rahmenbox;
}
Div.Box
{
Boxgröße: Rahmenbox;
-moz-box-sizing:Rahmenbox; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
Breite: 100 %;
Rand: 1em durchgehend rot;
schweben: links;
Polsterung: 15px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div class="box">Dieses Div nimmt die linke Hälfte ein. </div>
</div>
</body>
</html>Zusammenfassen Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit hilfreich sein kann. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. |
<<: Leistung des Node+Express-Testservers
Artikel empfehlen
MySql verwendet Skip-Name-Resolve, um das Problem langsamer externer Netzwerkverbindungen des Clients zu lösen
Das auf Tencent Cloud erstellte MySQL ist immer s...
Bei einer guten Refaktorierung geht es nicht nur um die Refaktorisierung des Codes, sondern auch um die Refaktorisierung des Lebens.
Es ist wirklich nicht einfach, eine gute Rekonstr...
So implementieren Sie eine automatische Remote-Sicherung von MongoDB unter Linux
Vorwort Nachdem ich den vorherigen Artikel über d...
Bei der kostenlosen Installationsversion von MySQL 5.7.19 sind Fallstricke aufgetreten (Sammlung)
1. Laden Sie die 64-Bit-ZIP-Datei von der offizie...
Ein verbessertes Screenshot- und Freigabetool für Linux: ScreenCloud
ScreenCloud ist eine tolle kleine App, von der Si...
CSS verwendet die Alibaba-Vektorbibliothek, um den entsprechenden Positionen schnell ansprechende Symboleffekte hinzuzufügen (Beispielcode).
Rufen Sie die Alibaba-Vektorsymbolbibliothek auf ...
Vue + Canvas realisiert den Effekt der Aktualisierung des Wasserfalldiagramms von oben nach unten in Echtzeit (ähnlich wie QT).
Ohne weitere Umschweife hier ein Demobild. Die im...
Schritte zur Bereitstellungsmethode für Docker Stack für Webcluster
Docker wird immer ausgereifter und seine Funktion...
Tiefes Verständnis der Verwendung von ::before/:before und ::after/:after
Teil 1: Grundlagen 1. Im Gegensatz zu Pseudoklass...
Die aktuellen Einschränkungen von Nginx in einem Artikel verstehen (einfache Implementierung)
Nginx ist mittlerweile einer der beliebtesten Loa...
Detaillierte Erklärung der Hook-Funktion und -Nutzung im Lebenszyklus der neuen Version von React
Im Vergleich zum alten Lebenszyklus Drei Hooks we...
Geben Sie zwei Zahlen in HTML ein, um Additions-, Subtraktions-, Multiplikations- und Divisionsfunktionen zu realisieren
1. parseFloat()-Funktion Erstellen Sie auf einer ...
Zusammenfassung von sieben in JavaScript implementierten Sortieralgorithmen (empfohlen!)
Inhaltsverzeichnis Vorwort Blasensortierung Grund...
Verwendung regulärer Ausdrücke in CSS-Selektoren
Ja, CSS hat auch reguläre Ausdrücke (Amen) Zwei l...
Analyse und Lösung des Problems, dass die MySQL-Instanz nicht gestartet werden kann
Inhaltsverzeichnis Vorwort Szenarioanalyse Zusamm...