Einführung in das CSS-Box-Modell
Box-Modell
1 Bereich in der Box
<1>Hauptattribute der Box:
width 宽度，css中width指的是内容的宽度，而不是盒子的宽度。 height高度 ，css中Height指的是内容的高度，而不是盒子的高度。 padding 内边距 border 边框 margin 外边距
< ;2>Die tatsächlich belegte Breite und Höhe der folgenden beiden Felder sind genau gleich, beide sind 302*302:
.box1{
width:100px;
height:100px;
padding:100px;
border:1px solid red;}
计算如下：1+100+100+100+1=302px.box2{
width:250px;
height:250px;
padding:25px;
border:1px solid red;}
计算如下：1+25+250+25+1=302px
上面代码中盒子的真实占有宽度计算公式：
真实占有宽度=左border+左padding+width+右padding+右border<3>Wenn Sie die tatsächlich belegte Breite von a beibehalten möchten Box unverändert, dann Breite hinzufügen Um die Polsterung zu reduzieren, müssen Sie die Breite reduzieren.
2. Füllen Sie die Polsterung aus
<1>Der Füllbereich hat in CSS2 eine Hintergrundfarbe .1, die Hintergrundfarbe muss mit der des Inhaltsbereichs übereinstimmen.
<2>Die Auffüllung erfolgt in 4 Richtungen, sodass wir die Auffüllung jeweils in 4 Richtungen beschreiben können.
Der erste Typ: kleine Attribute, also zusammengesetzte Attribute.
padding-top:30px; 上padding-right:20px; 右padding-bottom:40px; 下padding-left:100px; 左
Der zweite Typ: umfassende Attribute.
Getrennt durch Leerzeichen, oben, rechts, unten und links.
padding:30px 20px 40px 100px;
<3> Sie können kleine Attribute verwenden, um große Attribute zu stapeln (kleine Attribute können nicht vor große Attribute geschrieben werden):
padding:20px;padding-left:30px;
Frage 1:
p{
width:200px;
height:200px;
padding-left:10px;
padding-right:20px;
padding:40px 50px 60px;
padding-bottom:30px;
border:1px solid #000;
}Antwort: padding-left: 10px; und padding-right: 20px sind nutzlos, da die padding-Attribute dahinter überlagert sind.
<4> Einige Tags verfügen beispielsweise über eine Auffüllung. Wenn wir die Website erstellen, löschen wir diese Standardauffüllung
<1>Die drei Elemente des Rahmens: Dicke, Linientyp und Farbe.
<2>Alle Linientypen:
<3> Es gibt zwei Hauptmethoden, um es zu zerlegen:none 定义无边框。 hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。 常用的有：solid 、dashed、 dotted
Das erster Typ: nach Element
Wenn auf ein kleines Element mehrere durch Leerzeichen getrennte Werte folgen, dann ist die Reihenfolge oben, rechts, unten, links:border-width:10px; 边框宽度border-style:solid; 线型border-color:red; 颜色等价于：border:10px solid red;
border-width:10px 20px;border-style:solid dashed dotted;border-color:red green blue yellow;
border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;等价于：border:10px solid red
border-top-width:10px;border-top-style:solid;border-top-color:red;border-right-width:10px;border-right-style:solid;border-right-color:red;border-bottom-width:10px;border-bottom-style:solid;border-bottom-color:red;border-left-width:10px;border-left-style:solid;border-left-color:red;等价于：border:10px solid red;
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>三角形</title>
<style type="text/css">
p{
width: 0px;
height: 0px;
border: 30px solid white;
border-top-color: pink;
transition:all 1s ease 0s;
}
p:hover{
transform: rotate(180deg);
}
</style>
</head>
<body>
<p>
</p>
</body>
</html>4.1 Elemente auf Blockebene und Inline-Elemente
<1> PS: Wesentliche Vermeidung:
Die Erstellung von Webseiten erfolgt von oben nach unten. Mit Designsoftware können Sie zeichnen, wo immer Sie möchten.<2>Mikroskopische Eigenschaften des Standardflusses:
(1) Leerfaltungsphänomen.
(2) Die Höhe ist ungleichmäßig und die Unterkanten sind ausgerichtet.
(3) Automatischer Zeilenumbruch Wenn Sie den Text nicht in einer Zeile beenden können, brechen Sie ihn in eine neue Zeile um.
<3>Elemente auf Blockebene und Inline-Elemente
(1) Tags sind in zwei Ebenen unterteilt: Elemente auf Blockebene und Inline-Elemente.
(2) Elemente auf Blockebene:
霸占一行，不能与其他任何元素并列。 能接受宽高。 如果不设置宽度，那么宽度将默认变为父亲的100%。
可以与其他行内元素并排。 不能设置宽高。默认的宽度，就是文字的宽度。
文本级：p、span、a、b、i、u、em 容器级：p 、h系列 、li 、dt 、dd
4.2 Konvertierung zwischen Elementen auf Blockebene und Inline-Elementen
<1>Elemente auf Blockebene können auf Inline-Elemente gesetzt werden. Inline-Elemente können als Elemente auf Blockebene festgelegt werden.
<2>display wird verwendet, um die Eigenschaften von Elementen auf Inline- und Blockebene zu ändern.display:inline; 这个标签将会变为行内元素。 display:block; 这个标签将会变为块级元素。
(2) Absolute Positionierung
(3) Feste Positionierung
5. Floating: Dies ist das am häufigsten verwendete Attribut für das Layout in CSS.
5.1 Schwebende Elemente sind Off-Label
5.2 Schwebende Elemente liegen nahe beieinander
<1> Wenn genügend Platz vorhanden ist, liegen sie nahe am zweiten Bruder. Wenn der Platz nicht ausreicht, wird er sich auf Bruder Yi stützen. Wenn nicht genügend Platz vorhanden ist, um sich an Bruder 1 anzulehnen, bleiben Sie selbst an der linken Wand.
<2>float:left/right;
5.3 Floating-Elemente haben einen „Wortrand“-Effekt
Das obige ist der detaillierte Inhalt vonEinführung in das CSS-Box-Modell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1389
52
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
