CSS-Box-Modell

Das Box-Modell besteht aus Inhalt, Innenabstand, Rand und Rand. Es gibt nur 5 Hauptattribute in einer Box: Breite, Höhe, Innenabstand, Rand und Rand.

Im Folgenden werden die Bereiche in der Box nacheinander vorgestellt

Breite

Breite, Breite bezieht sich in CSS auf die Breite des Inhalts, nicht auf die Breite der Box, Höhe bezieht sich in CSS auf die Höhe des Inhalts, nicht auf die Höhe der Box

width:200px;
height: 200px;
padding:50px;
margin: 50px;
border: 5px solid red;
background-color: green;

Der obige Code setzt die Breite auf 200 Pixel, dann beträgt die Breite des Inhalts 200 Pixel, aber wenn wir die Maus über das Feld bewegen, beträgt die angezeigte Breite 310 Pixel, diese Breite ist die Breite des Felds, eigentlich belegt die Breite = Linker Rand, linke Polsterbreite, rechte Polsterung, rechter Rand. Wenn Sie die tatsächlich belegte Breite einer Box unverändert lassen möchten, erhöhen Sie die Breite und verringern Sie die Polsterung. Durch das Hinzufügen von Polsterung wird die Breite verringert.

Wenn Sie beispielsweise drei 402*402-Kästchen schreiben, gibt es unendlich viele Antworten. Sie können die Kombination nur nach der obigen Formel berechnen

.box1{width: 400px;height: 400px;border: 1px solid red;}
.box2{width: 200px;height: 200px;border: 6px solid red;padding: 95px;}
.box3{width: 0px;height: 0px;padding: 200px;border: 1px solid red;}
<br /><div class="box1">第1个盒子</div>
<div class="box2">第2个盒子</div>
<div class="box3">第3个盒子</div>

Polsterung

Polsterung ist Polsterung. Der Füllbereich hat gemäß CSS2.1 eine Hintergrundfarbe, und die Hintergrundfarbe muss mit der des Inhaltsbereichs übereinstimmen. Mit anderen Worten: Die Hintergrundfarbe füllt alle Bereiche innerhalb des Rahmens aus.

Die Polsterung erfolgt in 4 Richtungen, daher können wir die Polsterung jeweils in 4 Richtungen beschreiben. Es gibt zwei Methoden: Die erste besteht darin, kleine Attribute zu schreiben, die zweite darin, umfassende Attribute zu schreiben, die durch Leerzeichen getrennt sind.

Kleines Attribut: Dieser Typ eignet sich, wenn der Wert nur in eine Richtung festgelegt werden muss, da es sonst schwierig ist, in alle Richtungen zu schreiben.

 padding-top: 30px;padding-right: 20px;padding-bottom: 40px;padding-left: 100px;

Umfassende Attribute: Richtungen sind oben, rechts, unten, links

/*如果写了四个（表示方向为 上、右、下、左）*/
padding:30px 20px 40px 100px;

/*上、右、下、左（和右一样）*/
padding: 20px 30px 40px;<br />
/*如果写了两个（表示方向为 上、右、下（和上一样）、左（和右一样））*/
padding:30px 20px;

/*如果写了一个（表示方向为所有方向）*/
padding:30px;

Allgemeine Verwendung ist: Kleine Attribute verwenden, um große Attribute zu stapeln

 padding: 20px; /*各个方向都设置为20*/<br /> padding-left: 30px;/*左边单独设置为30*/

　

Sie können keine kleinen Attribute vor große Attribute schreiben

padding-left: 30px;
padding: 20px; /*这样写上边一行已经失去意义了*/

Machen Sie unten einen Test, um zu sehen, ob Sie es wirklich beherrschen? Teilen Sie uns unten die tatsächliche Breite und Höhe der Box mit

div{
	width: 200px;
	height: 200px;
	padding: 10px 20px 30px;
　　　　 padding-right: 40px;			
        border: 1px solid #000;
   }

Echt belegte Breite = 200 (Inhaltsbreite) 20 (linker Abstand) 40 (rechter Abstand) 1 (linker Rand) 1 (rechter Rand) = 262px

Die Polsterung wirkt sich auf die Boxgröße aus, übernimmt jedoch die Breite und die Polsterung wird nicht herausgedrückt .

Einige Elemente haben standardmäßig padding, wie zum Beispiel ul-Tag, , also machen wir For einfache Kontrolle im Stehen, ich lösche diese Standardpolsterung immer gerne :

*{margin: 0;padding: 0;}

* ist nicht effizient, daher verwenden wir den Union-Selektor, um alle Tags

aufzulisten

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

Grenze

Grenze ist die Grenze. Der Rahmen besteht aus drei Elementen: Dicke, Linientyp und Farbe. Wenn die Farbe nicht angegeben ist, ist die Standardeinstellung Schwarz. Wenn die anderen beiden Attribute nicht geschrieben sind, wird der Rahmen nicht angezeigt. In den gängigen Browsern wird es geringfügige Unterschiede bei der Darstellung von Rändern geben. Weitere Informationen finden Sie in diesem Artikel für eine ausführliche Einführung

border: 1px solid red;

Rand ist ein großes umfassendes Attribut. Der obige Code legt die vier Ränder auf eine Breite von 1 Pixel, einen durchgezogenen Linientyp und eine rote Farbe fest.

Das Randattribut kann zerlegt werden. Es gibt zwei Hauptmethoden, um es zu zerlegen:

1) Drücken Sie 3 Elemente:

border-width、border-style、border-color

border-width:10px;       → 边框宽度
border-style:solid;      → 线型
border-color:red;        → 颜色

Wenn auf ein bestimmtes kleines Element mehrere durch Leerzeichen getrennte Werte folgen, dann ist die Reihenfolge oben, rechts, unten, links:

border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;

2) Richtung drücken:

border-top、border-right、border-bottom、border-left

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;

Sie können eine weitere Ebene entsprechend der Richtung aufteilen, d. h. jedes Element in jede Richtung aufteilen, insgesamt 12 Anweisungen:

border-top-width:10px;
border-top-style:solid;
border-top-color:red;<br />
border-right-width:10px;
border-right-style:solid;
border-right-color:red;<br />
border-bottom-width:10px;
border-bottom-style:solid;
border-bottom-color:red;<br />
border-left-width:10px;
border-left-style:solid;
border-left-color:red;

border可以没有

border:none;
/*某一条边没有*/
border-left: none;
/*或者*/
border-left-width: 0;