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
Installations-Tutorial für die grüne Version von MySQL 5.7 unter einem 64-Bit-System von Windows 2008
Vorwort In diesem Artikel wird das Installationst...
Block- und Zeilenelemente, Sonderzeichen und Verschachtelungsregeln in HTML
Wenn wir die Verschachtelungsregeln grundlegender...
Detaillierte Erklärung der grundlegenden Typen von TypeScript
Inhaltsverzeichnis Boolescher Typ Nummerntypen Ze...
So zählen Sie das Datum mit Bash herunter
Sie möchten wissen, wie viele Tage es bis zu eine...
Das Vue-Cropper-Plugin realisiert die Kapselung der Bildaufnahme- und Upload-Komponente
Der spezifische Code zum Einkapseln der Bildaufna...
Zusammenfassung einiger gängiger Methoden von JavaScript-Arrays
Inhaltsverzeichnis 1. Einleitung 2. filter() 3. K...
Detaillierte Erläuterung der bidirektionalen Bindung von Vue
Inhaltsverzeichnis 1. Zwei-Wege-Bindung 2. Wird d...
So installieren und konfigurieren Sie das Orchestrierungstool Docker Compose in Docker.v19
1. Einführung in Compose Compose ist ein Tool zum...
Eine kurze Diskussion über den Unterschied zwischen MySQL-Primärschlüsseleinschränkung und eindeutiger Einschränkung
Inhaltsverzeichnis Primärschlüsseleinschränkung E...
Erfahrung im Selbststudium von CSS-Optimierungsfähigkeiten
1. Verwenden Sie CSS-Sprites. Der Vorteil besteht ...
Detaillierte Erklärung der Mencached-Cache-Konfiguration basierend auf Nginx
Einführung Memcached ist ein verteiltes Caching-S...
So konfigurieren Sie Nginx's Anti-Hotlinking
Experimentelle Umgebung • Eine minimal installier...
Schritte zur Methode „Mysql-Abfragedatenbankkapazität“
Abfrage der Gesamtgröße aller Datenbanken So geht...
Vue realisiert den Logistik-Timeline-Effekt
In diesem Artikelbeispiel wird der spezifische Co...
So analysieren Sie die Attributschnittstelle zum Hinzufügen eines Dateisystems unter Linux oder Android
Der Erste: 1. Fügen Sie wichtige Headerdateien hi...