Die drei Kerne des Seitenlayouts: Boxmodell, Floating und Positionierung.
Der Kern des Webseitenlayouts: Platzieren von Boxen über CSS.
Zu den Komponenten des Boxmodells gehören: Rahmen, Ränder, Innenabstand und tatsächlicher Inhalt
Polsterung: wird standardmäßig gegenüber dem Feld angezeigt und steuert den Abstand zwischen dem Text und dem Feld
Rand: Steuern Sie den Abstand zwischen den Feldern
Der Rahmen umfasst: Rahmenbreite (Dicke), Rahmenstil (durchgezogene Linie, gepunktete Linie, gepunktete Linie), Rahmenfarbe
div {
Breite: 300px;
Höhe: 200px;
Randbreite: 5 Pixel; Randstil: einfarbig; Randstil: gepunktet; Randfarbe: rosa;Rand: 1 Pixel durchgehend rot; keine Reihenfolge
So schreiben Sie den Rand separat (wird zum Ändern einer bestimmten Kante verwendet):
Rand oben: 1 Pixel einfarbig blau; border-bottom:1px einfarbig rosa;
Wenn es nur einen unterschiedlichen Rand gibt, können Sie kaskadierendes Schreiben verwenden:
Rand: 5px gestricheltes Rosa; border-top: 1 Pixel durchgehend blau; ein oberer Rand, der das gesamte Feld darüber abdeckt
Dünne Linienränder für Tabellen:
Wenn der Abstand zwischen Zellen in einer Tabelle auf 0 eingestellt ist, erscheint die Breite dieses Teils größer als die Breite des festgelegten Randes einer Zelle, da die Ränder zweier benachbarter Zellen zusammengefügt werden. Sie können das Attribut border-collapse verwenden.
Die Eigenschaft border-collapse steuert, wie der Browser Tabellenränder zeichnet. Sie steuert die Ränder benachbarter Zellen. Benachbarte Grenzen zusammenführen:
Tisch {
border-collapse:collapse; Dieses Attribut muss der Tabelle hinzugefügt werden, um wirksam zu sein} Ränder wirken sich auf die tatsächliche Größe der Box aus. <br/>Das Vorhandensein von Rändern vergrößert die Box, da es zwei Möglichkeiten gibt:
(1) Wenn Sie die Größe der Box messen, messen Sie nicht den Rand. (2) Wenn der Rand in die Messung einbezogen wird, müssen Sie die Breite des Randes von den Breiten- und Höhenwerten abziehen.
Der Abstand zwischen dem Rand und dem Inhalt.
Die Polsterung wirkt sich auf die tatsächliche Größe der Box aus . <br/>Um sicherzustellen, dass die Boxgröße mit der Darstellung übereinstimmt, müssen Sie die Breite der Polsterung von den Werten für Breite und Höhe abziehen.
Wenn das Feld selbst keine Breiten- und Höhenattribute angibt, wird die Größe des Felds durch die Auffüllung nicht erweitert : Wenn die Breite nicht angegeben ist, wird das Feld durch die linke und rechte Auffüllung nicht erweitert, wenn die Höhe nicht angegeben ist Durch die Polsterung oben und unten wird die Box nicht erweitert.
Kontrollieren Sie den Abstand zwischen den Boxen
Typische Anwendung: Um eine horizontale Zentrierung einer Box auf Blockebene zu erreichen, müssen zwei Bedingungen erfüllt sein: Die Box muss eine bestimmte Breite haben und der linke und rechte Rand der Box muss auf „Automatisch“ eingestellt sein
Inline-Elemente und Inline-Blockelemente: Wenn Sie eine horizontale zentrierte Ausrichtung erreichen möchten, fügen Sie einfach text-align: center zum übergeordneten Element hinzu.
Randzusammenführung (1) Zusammenbruch der vertikalen Ränder verschachtelter Blockelemente: Bei zwei Blockelementen mit einer verschachtelten Beziehung (Eltern-Kind-Beziehung) hat das übergeordnete Element einen oberen Rand und das untergeordnete Element hat zu diesem Zeitpunkt ebenfalls einen oberen Rand. Das übergeordnete Element wird stärker reduziert. Große Randwerte.
Lösung: Geben Sie einen äußeren Rand für das übergeordnete Element an. Geben Sie einen inneren Rand für das übergeordnete Element an. Fügen Sie dem übergeordneten Element einen Überlauf hinzu.
Viele Webseitenelemente verfügen über standardmäßige Innen- und Außenränder, und die Standardeinstellungen variieren von Browser zu Browser, da vor dem Layout die Innen- und Außenränder von Webseitenelementen gelöscht werden müssen.
* {
Rand: 0px; Abstand löschen: 0px; Abstand löschen}Um die Kompatibilität zu gewährleisten, versuchen Sie, nur den linken und rechten Innen- und Außenrand für Inline-Elemente festzulegen und nicht den oberen und unteren Innen- und Außenrand. Es reicht jedoch aus, sie auf Blockebene zu konvertieren Elemente auf Inline-Ebene.
Sorgen Sie dafür, dass die Box abgerundete Ecken hat.
Die Eigenschaft border-radius wird verwendet, um die abgerundeten Ecken der inneren und äußeren Ränder des Elements festzulegen.
Grammatik:
border-radius: length; Je größer der Parameter, desto offensichtlicher ist der Bogen. Dieser Parameter kann ein bestimmtes Array oder ein Prozentsatz sein.
Sein Prinzip:
So schreiben Sie einen abgerundeten Rand:
(1)圆形的写法: Wenn das Kästchen ein正方形ist und die Länge = die halbe Höhe oder Breite des Kästchens ist, ist das Kästchen ein Kreis. Hälfte: kann ein exakter Wert oder 50 % sein. 】
(2)圆角矩形的写法：参数设置为高度的一半
(3) Dieses Attribut ist ein abgekürztes Attribut, das tatsächlich lautet: obere linke Ecke, obere rechte Ecke, untere rechte Ecke, untere linke Ecke (im Uhrzeigersinn)
(4) Wenn Sie nur eine Ecke festlegen möchten, können Sie diese wie folgt schreiben: Radius des Randes oben links, Radius des Randes unten rechts usw. Beachten Sie, dass die Reihenfolge nicht umgekehrt werden kann.
Die Box-Shadow-Eigenschaft fügt der Box einen Schatten hinzu.
Grammatik:
Box-Shadow: H-Shadow-V-Shadow-Unschärfe-Spread-Farbeinsatz; Box-Standard-Außenschatten
Unschärfe: Die Virtualität und Realität des Schattens. Je größer der Parameter, desto unschärfer.
Textschatten
Grammatik:
Textschatten: H-Schatten, V-Schatten, Unschärfe, Farbe
Damit ist dieser Artikel über CSS-Box-Modelle, abgerundete Ränder und Box-Schatten abgeschlossen. Weitere verwandte Inhalte zu CSS-Box-Modellen finden Sie in früheren Artikeln auf downcodes.com. Ich hoffe, Sie lesen in Zukunft weiter . Unterstützen Sie downcodes.com!