suchen

Heim  >  Artikel  >  Web-Frontend  >  Einführung in das CSS-Box-Modell

Einführung in das CSS-Box-Modell

一个新手
一个新手Original
2017-09-11 10:32:041827Durchsuche


Box-Modell

1 Bereich in der Box

f35d6e602fd7d0f0edfa6f7d103c1b57Hauptattribute 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
5bdf4c78156c7953567bb5a0aef2fc53Wenn 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

f35d6e602fd7d0f0edfa6f7d103c1b57Der Füllbereich hat in CSS2 eine Hintergrundfarbe .1, die Hintergrundfarbe muss mit der des Inhaltsbereichs übereinstimmen.
2cc198a1d5eb0d3eb508d858c9f5cbdbDie 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;
5bdf4c78156c7953567bb5a0aef2fc53 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.

23889872c2e8594e0f446a471a78ec4c Einige Tags verfügen beispielsweise über eine Auffüllung. Wenn wir die Website erstellen, löschen wir diese Standardauffüllung

f35d6e602fd7d0f0edfa6f7d103c1b57Die drei Elemente des Rahmens: Dicke, Linientyp und Farbe.

2cc198a1d5eb0d3eb508d858c9f5cbdbAlle Linientypen:
5bdf4c78156c7953567bb5a0aef2fc53 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;

Zweiter Typ: Je nach Richtung 
border-width:10px 20px;border-style:solid dashed dotted;border-color:red  green blue yellow;
Die erste Methode der Demontage:


Die zweite Methode der Demontage: Jedes Element in jede Richtung zerlegen: 
border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;等价于：border:10px solid red

<4> ;Sie können Rahmen verwenden, um Dreiecke zu erstellen. 
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;
4. Standard-Dokumentenfluss
<!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

f35d6e602fd7d0f0edfa6f7d103c1b57 PS: Wesentliche Vermeidung:
Die Erstellung von Webseiten erfolgt von oben nach unten. Mit Designsoftware können Sie zeichnen, wo immer Sie möchten.

2cc198a1d5eb0d3eb508d858c9f5cbdbMikroskopische 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.
5bdf4c78156c7953567bb5a0aef2fc53Elemente auf Blockebene und Inline-Elemente
(1) Tags sind in zwei Ebenen unterteilt: Elemente auf Blockebene und Inline-Elemente.
(2) Elemente auf Blockebene:

(3) Inline-Elemente: 
霸占一行，不能与其他任何元素并列。
能接受宽高。
如果不设置宽度，那么宽度将默认变为父亲的100%。

(4) Tags sind unterteilt in: Textebene und Containerebene. 
可以与其他行内元素并排。
不能设置宽高。默认的宽度，就是文字的宽度。

Grundsätzlich sind alle Tags auf Textebene Inline-Elemente. Mit Ausnahme von p handelt es sich um ein Element auf Blockebene. 
文本级：p、span、a、b、i、u、em
容器级：p 、h系列 、li 、dt 、dd
Alle Tags auf Containerebene sind Elemente auf Blockebene.


4.2 Konvertierung zwischen Elementen auf Blockebene und Inline-Elementen

f35d6e602fd7d0f0edfa6f7d103c1b57Elemente auf Blockebene können auf Inline-Elemente gesetzt werden. Inline-Elemente können als Elemente auf Blockebene festgelegt werden.
2cc198a1d5eb0d3eb508d858c9f5cbdbdisplay wird verwendet, um die Eigenschaften von Elementen auf Inline- und Blockebene zu ändern.


5bdf4c78156c7953567bb5a0aef2fc53Es gibt drei Methoden in CSS, um ein Element vom Standarddokumentfluss zu trennen. 
display:inline; 这个标签将会变为行内元素。
display:block; 这个标签将会变为块级元素。
(1) Floating

(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
f35d6e602fd7d0f0edfa6f7d103c1b57 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.
2cc198a1d5eb0d3eb508d858c9f5cbdbfloat: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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie ein mehrspaltiges Layout mithilfe von CSSNächster Artikel：So implementieren Sie ein mehrspaltiges Layout mithilfe von CSS

In Verbindung stehende Artikel

Mehr sehen