Detaillierte Erklärung der Größe des Boxmodells, abhängig von seinen Polsterungs-, Rand- und Rahmenwerten
|
Das Boxmodell gibt die Breite und Höhe sowie die Polsterung, den Rahmen und die Ränder der Elementbox an. Der leere Raum innerhalb des Rahmens ist die Polsterung, und der leere Raum außerhalb des Rahmens ist der Rand. Wie unten gezeigt, ist die Breite des Boxmodellelements Box = die Breite des Inhaltsbereichs + 2 (Polsterung + Rand + Rahmen), d. h. die Breite des Elements in diesem Beispiel beträgt 170 Pixel. Es ist zu beachten, dass sich Breite und Höhe in CSS auf die Breite und Höhe des Inhaltsbereichs beziehen. Eine Vergrößerung der Polsterung, Rahmen und Ränder wirkt sich nicht auf die Größe des Inhaltsbereichs aus, erhöht jedoch die Gesamtgröße des Elementfelds. (Denken Sie beim Anzeigen im Browser daran, die Konsole mit F12 zu öffnen und auf das entsprechende Element zu klicken, um es anzuzeigen.)
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Die Größe des Boxmodells hängt von seinen Polsterungs-, Rand- und Rahmenwerten ab</title>
<style type="text/css">
div{
Polsterung: 10px;/*Polsterung*/
Rand: 20px;/*Rand*/
Rand: 10px 20px 30px 40px;/*oben 10px rechts 20px unten 30px links 40px*/
Rand: 10px 20px;/*oben, unten, links und rechts*/
Rand: 10px 20px ;/*oben und unten unterschiedlich, links und rechts gleich*/
Rand: 10px 20px 30px;/*Rand*/
Rand: 5px durchgehend rot;/*Rand*/
Breite: 100px;/*Breite des Inhaltsbereichs 100*/
Höhe: 100px;/*Höhe des Inhaltsbereichs 100*/
}
/*Boxgrößenwert = 2 (Polsterung + Rahmen + Rand)*//*Die Größe des Div*/
</Stil>
</Kopf>
<Text>
<div>Sie können das gesamte Skript nicht durch das Lesen vieler Bücher lernen, Sie brauchen mehr Übung. </div>
</body>
</html>Ob Rand oder Polsterung, sie sind im Uhrzeigersinn angeordnet, wobei die Werte oben, rechts, unten und links definiert sind. Beispielsweise bedeutet margin:10px 10px 10px 10px, dass oben, unten, links und rechts der Box 10px Ränder hinzugefügt werden, kurz margin: 10px; marigin:10px 10px; oberer, unterer, linker und rechter Rand sind 10px
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Der sogenannte Margin-Bug überlappt sich tatsächlich, wie kann man ihn lösen?</title>
<style type="text/css">
.box1,.box2{
Breite: 200px;
Höhe: 200px;
Rand: 10px 20px;
Hintergrundfarbe: rot;
}
</Stil>
</Kopf>
<Text>
<div class="box1">Die Funktionsfähigkeit ist in der Funktionsspezifikation nicht vorhanden</div>
<div class="box2">Software muss nutzbar sein, bevor sie wiederverwendet werden kann. </div>
</body>
</html>Nach normaler Auffassung sollte der obere und untere Abstand der beiden Boxen im obigen Code 20 Pixel betragen. Tatsächlich sind es aber nur 10 Pixel, die wir in der Konsole prüfen, und die anderen 10 Pixel überlappen sich offensichtlich. Wenn wir den Randwert der beiden Boxen anpassen, stellen wir fest, dass der obere und untere Abstand den Maximalwert von 20 Pixeln annehmen (Elemente mit gleichem Rand nehmen den Maximalwert an). Lösung: 1. float2 ändert die Elementstrukturanzeige: Inline-Block. Wenn die Ränder verschachtelt sind, also eine Eltern-Kind-Beziehung aufweisen, werden Sie außerdem feststellen, dass sie sich überlappen und keine Lücke vorhanden ist. Wie können also diese durch die Ränder verursachten Probleme gelöst werden? Lösung: Die Box hat keinen Deckel. Finden Sie eine Möglichkeit, die beiden Enden mit Inhalt zu füllen. Sie können Rahmen, Polsterung oder Überlauf verwenden: ausgeblendet. Das Boxmodell ist sehr wichtig für unser nachfolgendes Website-Layout, da es zur genauen Positionierung der Website beiträgt.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Behebung des durch den Rand verursachten Fehlers</title>
<style type="text/css">
/* .box1,.box2{
Breite: 200px;
Höhe: 200px;
Hintergrundfarbe: rot;
} */
/* .box1{
Rand: 10px 20px;
}
.box2{
Rand: 20px 10px;
}
.box3{
Rand: 20px 10px;
}
.box4{
Rand: 10px 20px;
} */
/* Lösungen für die Probleme, die durch die Nivellierung des Boxmodells verursacht werden: 1. Float 2. Display: Inline-Block 3. Schreiben Sie direkt einen Maximalwert und nehmen Sie den maximalen Rand auf derselben Ebene*/
div{
/* float: links; */
Anzeige: Inline-Block;
Breite: 1200px;
}
.box1{
Rand: 10px 20px;
}
.box2{
Rand: 80px 10px;
}
/* Lösung für das Problem, das durch die horizontale Verschachtelung des Boxmodells entsteht: Die Box hat keinen Deckel. Finden Sie eine Möglichkeit, die beiden Enden mit Inhalt zu füllen. Sie können Rahmen, Polsterung oder Überlauf: ausgeblendet verwenden. Füllen Sie die Ober- und Unterseite mit Text*/
P{
Breite: 800px;
}
.box3,.box4{
Rand: 30px;
}
.box3{
Hintergrundfarbe: grün;
/* border:1px solid red*//*Dem übergeordneten Element einen Rand hinzufügen*/
padding: 10px; /*Fügen Sie dem übergeordneten Element eine Polsterung hinzu*/
/*overflow: hidden;*//*Fügen Sie overflow:hidden hinzu, um den überschüssigen Teil auszublenden. Dies führt dazu, dass der gesamte Überschuss abgeschnitten wird*/
}
.box4{
Anzeige: Block;
Hintergrundfarbe: grüngelb;
}
</Stil>
</Kopf>
<Text>
<div class="box1">Die Funktionsfähigkeit ist in der Funktionsspezifikation nicht vorhanden</div>
<div class="box2">Software muss nutzbar sein, bevor sie wiederverwendet werden kann. </div>
<p Klasse="Box3">
<!-- Einfachheit geht der Komplexität nicht voraus, sondern kommt nach der Komplexität. -->
<span class="box4">Der Code der Vergangenheit ist ungetesteter Code. </span>
<!-- Entweder sei der Erste oder der Beste -->
</p>
</body>
</html>Damit ist dieser Artikel darüber, wie die Größe des Boxmodells von seinen Werten für Polsterung, Ränder und Rahmen abhängt, abgeschlossen. Weitere Informationen zu den Werten für Polsterung, Ränder und Rahmen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
>>: Nodejs-Plugin und Nutzungsübersicht
Artikel empfehlen
Vorteile von MySQL-Abdeckungsindizes
Ein allgemeiner Vorschlag besteht darin, Indizes ...
Detaillierte Schritte zum Erstellen einer React-Anwendung mit einer Rails-API
Inhaltsverzeichnis Backend: Rails API-Teil Front-...
Eine kurze Diskussion über Shallow Copy und Deep Copy in JavaScript
Inhaltsverzeichnis 1. Direkte Zuordnung 2. Oberfl...
js Canvas realisiert zufällige Partikeleffekte
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung der Vuex-Persistenz in der praktischen Anwendung von Vue
Inhaltsverzeichnis Vuex-Persistenz Zusammenfassen...
So installieren Sie den Apache-Dienst im Linux-Betriebssystem
Downloadlink: Betriebsumgebung CentOS 7.6 in eine...
Mit dem Swiper.js-Plugin ist die Implementierung von Karussellbildern ganz einfach
Swiper ist ein mit reinem JavaScript erstelltes P...
Klasse in Front-End-JavaScript
Inhaltsverzeichnis 1. Klasse 1.1 Konstruktor() 1....
Reagiert auf verschiedene Arten, Parameter zu übergeben
Inhaltsverzeichnis Übergeben von Parametern zwisc...
Der Speicherplatz wird in den Browsern IE, Firefox und Chrome unterschiedlich angezeigt
Die Anzeigeeffekte in den Brow...
Nginx-Proxy-Axios-Anforderung und Vorsichtsmaßnahmen
Vorwort Ich habe vor kurzem eine kleine Demo gesc...
So greifen Sie über eine unabhängige IP direkt auf das Docker-für-Windows-Container-Intranet zu
Docker empfiehlt offiziell, dass wir Port-Mapping...
Richtige Methode zum Schreiben leerer Links, um Seitensprünge nach dem Klicken auf ein href #-Problem zu verhindern
Manchmal müssen Sie Links verwenden, aber Sie müss...
Erkunden Sie die Implementierung der Datenfreigabe und Methodenfreigabe für JavaScript-Prototypen
Weitergabe von Daten Welche Art von Daten müssen ...
Detailliertes Tutorial zur Installation von MySQL 8.0.12 unter Windows
In diesem Artikel finden Sie eine ausführliche An...