Beschreibung und Beispiele des CSS-Box-Modells

1. Was ist eine Box:

1. Das Boxmodell wird auch Boxmodell genannt. Alle Elemente auf der Seite können als Boxen betrachtet werden.

2. Die Box ist ein Behälter für Elemente. In menschlicher Hinsicht ist die Box die Heimat der Elemente.

2. Arten und Funktionen von Boxen:

1. Es gibt zwei Arten von Elemente: Elemente auf Blockebene und Inline-Elemente, also Ihr entsprechendes Zuhause: Boxen, natürlich gibt es zwei Arten: Boxen auf Blockebene, Inline-Boxen

2. Boxen auf Blockebene werden normalerweise als Container für verwendet Andere Elemente und Inline-Boxen enthalten immer Inhalte.

in Boxen auf Blockebene. 3. Anordnung der Boxen:

1. Boxen sind die Anordnungsreihenfolge auf der Seite, die wird vom Hauptplaner entschieden: Dokumentenfluss, es sei denn, die Box läuft von zu Hause weg. Ausbrechen vom Dokumentenfluss

2. Der Dokumentenfluss ist sowohl die Art und Weise, wie Elemente angeordnet werden, als auch die Aktion, sie anzuordnen sowohl ein Substantiv als auch ein Verb

4. Komponenten des Boxmodells:

1. Da Boxen meist als Elementcontainer verwendet werden, verwenden wir zur Einführung von

2. Die vier Hauptkomponenten einer Box: Inhalt, Polsterung, Rand (Rand), Rand (äußerer Rand)

5. Wir verwenden vier Schönheiten, um uns das Boxmodell schnell einzuprägen:

1. Inhalt: Unsere eigene Frau oder Freundin, das ist etwas Sichtbares und Greifbares zu sehen

2. Polsterung: Es ist transparent, genau wie der beste Freund Ihrer Frau, es beeinflusst immer die Beziehung zwischen Ihnen und deine Frau

3. Grenze Grenze: sie ist sichtbar, sie ist wandelbar, charmant, am schwülsten und kokettsten, genau wie deine Vertraute, Traumliebhaberin oder kleine Geliebte

4.Rand außen Rand: und Polsterung Innenkante Der Abstand ist ebenfalls transparent, genau wie die Frau des Chefs oder die Frau Ihres Kumpels, sie werden immer in Ihrer Fantasie leben

6. Inhalt:

1. Stützbreite und Höheneinstellungen

2. Der Innenraum kann ein Blockelement oder ein Inline-Element sein

3. Unterstützt Hintergrundeinstellungen

7. Polsterung:

1. Unterstützt die Einstellung der Größe in vier Richtungen, angeordnet im Uhrzeigersinn: oben, rechts, unten, links

2. Sie können auch

individuell padding-top einstellen: oberer Rand

padding - rechts: rechter Rand

padding-bottom: unterer Rand

padding-left: linker Rand

3. Unterstützte Abkürzung:

padding: 10px 5px 10px 5px; 🎜>

8. Rand:

1. Unterstützt die Einstellung der Größe in vier Richtungen, im Uhrzeigersinn. Anordnung: oben, rechts, unten, links

2. Sie können auch

einzeln margin-top: oberer Rand

margin-right: rechter Rand

margin-bottom: unterer Rand

margin-left: linker Rand

3. Unterstützte Abkürzungen:

Rand: 10px 5px 10px 5px; oben 10px, unten 10px, unten 5px

Rand: 10px 20px 30px; oben 10px, unten 30px

Rand: 10px 20px; oben und unten 10px, links und rechts 20px

Rand: 10px; Oben, rechts, unten und links sind alle 10px

9. Rand:

1. Der innere und äußere Rand sind transparent und unsichtbar, daher kann nur die Breite eingestellt werden

2 Der Rand ist sichtbar, daher gibt es drei Untereigenschaften, die eingestellt werden können : Breite, Stil, Farbe

3. Reihenfolge festlegen: oben, rechts, unten, links

Oberen Rand festlegen:

border-top-width: 5px //; Legen Sie die Breite fest

border-top-style: solid; // Legen Sie den Stil fest

border-top-color: #f60 // Legen Sie die Perspektive/Farbe fest

Border-Top: 5px solid #f60; // Kurz

Richtigen Rahmen festlegen:

Border-Width: 10px;

border-right-style: dashed;

border-right-color: #888;

border-right: 10px gestrichelt #888;

Unteren Rand festlegen:

border-bottom- width: 10px;

border-bottom-style: solid;

border-bottom-color: #555;

border-bottom: 10px solid #555;

Linken Rand festlegen:

border-left-width: 8px;

border-left-style: dotted;

border-left-color: #333;

border-left: 8px dotted #333;

Alle Ränder verwenden die gleiche Einstellung:

border-width: 10px ; //Legen Sie die Breite der vier Ränder einheitlich fest

          border-style: solid;                                                                              using using using using using                     Die Implementierung kann jetzt durch Code erreicht werden

2: Der Rand hat vier Scheitelpunkte, die für jeden Scheitelpunkt festgelegt werden können

2.1: Oberer linker Eckrand-oben-links-Radius: 20px;

2.2: Oberer rechter Eckrand-oben -right-radius:20px;

2.1: Unterer rechter Eckrand-bottom-right-radius:20px;

2.1: Unterer linker Eckrand-bottom-left-radius:20px;

Hinweis: Ausländer denken anders als wir. Im Attribut werden oben, oben und unten vor links und rechts geschrieben

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>1.盒子模型</title>
    <style>
        .box1 {
            /*在父级盒子.box已经设置过了*/
            /*width: 200px;*/
            /*height:200px;*/
            /*background-color: #f89;*/
            border: 2px solid #363636;
            /*通过计算,设置内边距40px,可实现图片居中*/
            padding:40px;
            /*结果并未实现居中,这是为什么呢?因为内边距会撑开盒子,这与我们生活中的盒子是不一样的*/
            /*解决方法有二个:1.修改盒子大小,宽高减去padding值,2.为该盒子套一个父级盒子,单独设置宽高*/
            /*第一种方案:修改当前盒子大小*/
            /*width: 120px;*/
            /*思考:为什么要减去80px?因为边距是成对的,40px的2倍就是80px*/
            /*height:120px;*/
        }
        /*.box是.box1的父级盒子,在这里设置了宽高,子盒子就不必设置了*/
        /*我这里忽略了边框宽度的影响*/
        .box {
            width: 200px;
            height:200px;
        }
        .box2{
            width: 200px;
            height:200px;
            background-color: lightskyblue;
            borer: 2px solid #333;
            margin-bottom: 20px;
        }
        .box3{
            width: 200px;
            height:200px;
            background-color: lightgreen;
            borer: 2px solid #333;
            /*margin-top: 20px;*/
            /*上下外边距的二个特征:*/
            /*1.如果上下外边距相等,并不会相加,而是相互叠加在了一起;*/
            /*2.如果上下外边距不相待,则会产生塌陷,最终数值大的外边距胜出,以它为准*/
            margin-top: 30px;
            /*注意:左右外边距不会产生叠加和塌陷,仍是各自相加为最终结果*/
        }
        /*边框设置*/
        .box4 {
            width: 200px;
            height:200px;
            background-color: lightskyblue;
            /*设置上边框:*/
            /*设置宽度*/
            /*border-top-width: 5px;*/
            /*设置样式*/
            /*border-top-style: solid;*/
            /*设置前景色/颜色*/
            /*border-top-color: #f60;*/
            /*简写*/
            /*border-top: 5px solid #f60;*/
            /*设置右边框:*/
            /*border-right-width: 10px;*/
            /*border-right-style: dashed;*/
            /*border-right-color: #888;*/
            /*border-right: 10px dashed #888;*/
            /*设置下边框:*/
            /*border-bottom-width: 10px;*/
            /*border-bottom-style: solid;*/
            /*border-bottom-color: #555;*/
            /*border-bottom: 10px solid #555;*/
            /*设置左边框:*/
            /*border-left-width: 8px;*/
            /*border-left-style: dotted;*/
            /*border-left-color: #333;*/
            /*border-left: 8px dotted #333;*/
            /*所有边框使用统一设置:*/
            /*统一设置宽度*/
            /*border-width: 10px;*/
            /*统一设置样式*/
            /*border-style: solid;*/
            /*统一设置颜色*/
            /*border-color: gray;*/
            /*统一设置的简写*/
            /*border: 10px solid gray;*/
        }
        /*圆角盒子设置技巧*/
        .box5 {
            width: 200px;
            height:200px;
            background-color: #f89;
            border-top-left-radius: 20px;
            border-top-right-radius: 40px;
            border-bottom-right-radius: 60px;
            border-bottom-left-radius: 80px;
            /*如果每个角的圆度是一样的,可以简化*/
            border-radius: 20px;
            /*如果原盒子是一个正方形的话,只需要把角度设置为宽度的一半即可得到一个正圆*/
            border-radius: 100px;
            /*为了适应外部盒子变化,建议设置为百分比,例如:50%,效果完全一样*/
            /*border-radius: 50%;*/
        }
        /*创建有阴影盒子的技巧*/
        .box6 {
            width: 200px;
            height:200px;
            background-color: lightskyblue;
            /*设置圆角*/
            border-radius:50%;
            /*设置内边距并重新调整盒子大小*/
            padding: 10px;
            width: 180px;
            height: 180px;
            /*设置盒子的阴影*/
            /*box-shadow:  X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 ;*/
            /*外发光:模糊8px,阴影到边框为3px*/
            box-shadow:0 0 8px 3px #888;
            /*内发光:模糊8px,阴影到边框为3px*/
            box-shadow:0 0 8px 3px #888 inset;
            /*向右下投影*/
            box-shadow:8px 8px 8px 3px #888;
            /*向左上投影*/
            box-shadow:-8px -8px 8px 3px #888 ;
        }
    </style>
</head>
<body>

Das obige ist der detaillierte Inhalt vonBeschreibung und Beispiele des CSS-Box-Modells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!