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

>>: So verhindern Sie, dass die Bildlaufleiste die Seitenbreite beeinflusst, wenn die Bildlaufleiste auf der Seite angezeigt wird

Die Lösung für das Problem, dass die Webtabelle oder die Div-Ebene in der Webseite gestreckt ist

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

Die Lösung für das Problem, dass die Webtabelle oder die Div-Ebene in der Webseite gestreckt ist

MySQL-Lernhinweise: Vollständiges Verwendungsbeispiel für Select-Anweisungen, detaillierte Erläuterung

Beispiel für die Verwendung des Nginx-Reverse-Proxys für Go-FastDFS

Wissen Sie, wie Sie mit Vue-Cropper Bilder in Vue zuschneiden?

Detaillierte Erklärung der Meta-Tags (die Rolle der Meta-Tags)

Ursachen und Lösungen für langsame MySQL-Abfragegeschwindigkeit und schlechte Leistung

So erstellen Sie eine PHP+Nginx+Swoole+MySQL+Redis-Umgebung mit Docker

Detaillierte Erläuterung der Ereignisschleifen-Ereigniswarteschlange von js im Browser

Lehr- oder Lernprogramm für Webdesign

Docker-Image-Erstellung und Paketierung und Bereitstellung des gesamten Projekts mit einem Klick

Artikel empfehlen

Bei der Installation von mysql8.0.15 winx64 unter Win10 und der Verbindung zum Server sind Probleme aufgetreten

Beispielcode zum Zeichnen von Doppelpfeilen in gängigen CSS-Stilen

Methode zur Behebung von IE6-Space-Bugs

Reines CSS, um nach Auswahl des Produkts das Zeichen √ in der unteren rechten Ecke anzuzeigen

Beispiel für die Verwendung des href-Attributs und des onclick-Ereignisses eines Tags

js-Entwicklungs-Plugin zum Erzielen eines Tab-Effekts

Installations- und Verwendungsschritte für vue-amap

Detaillierte Erläuterung der zugrunde liegenden Implementierung des absteigenden Index, einer neuen Funktion von MySQL 8

Detaillierte Erklärung der in JavaScript integrierten Objekte, Mathematik und Zeichenfolgen

Welche Funktion ist !-- -- im HTML-Seitenstil?

Detaillierte Erläuterung des Datenreaktionsprinzips von Vue

Eine kurze Erläuterung zu Leerzeichen und Leerzeilen im HTML-Code

MySQL-Serie 15: Allgemeine MySQL-Konfiguration und Leistungsstresstest

So zeichnen Sie eine vertikale Linie zwischen zwei Div-Tags in HTML

Erstellen Sie eine virtuelle Umgebung mit venv in Python3 in Ubuntu