Einführung in das CSS-Box-Modell-CSS-Tutorial-php.cn

Einführung in das CSS-Box-Modell

一个新手

Freigeben： 2017-09-11 10:32:04

Original

1865 Leute haben es durchsucht

Box-Modell

1 Bereich in der Box

<1>Hauptattribute der Box:

width 宽度，css中width指的是内容的宽度，而不是盒子的宽度。 
height高度 ，css中Height指的是内容的高度，而不是盒子的高度。 
padding 内边距 
border 边框 
margin 外边距

Nach dem Login kopieren

< ;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

Nach dem Login kopieren

<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; 左

Nach dem Login kopieren

Der zweite Typ: umfassende Attribute.
Getrennt durch Leerzeichen, oben, rechts, unten und links.

padding:30px 20px 40px 100px;

Nach dem Login kopieren

<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;

Nach dem Login kopieren

Frage 1:

p{   
width:200px;    
height:200px;    
padding-left:10px;    
padding-right:20px;    
padding:40px 50px 60px;    
padding-bottom:30px;    
border:1px  solid #000;
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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;

Nach dem Login kopieren

Zweiter Typ: Je nach Richtung

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

Nach dem Login kopieren

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

Nach dem Login kopieren

<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;

Nach dem Login kopieren

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>

Nach dem Login kopieren

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:

(3) Inline-Elemente:

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

Nach dem Login kopieren

(4) Tags sind unterteilt in: Textebene und Containerebene.

可以与其他行内元素并排。
不能设置宽高。默认的宽度，就是文字的宽度。

Nach dem Login kopieren

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

Nach dem Login kopieren

Alle Tags auf Containerebene sind Elemente auf Blockebene.

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.

<3>Es gibt drei Methoden in CSS, um ein Element vom Standarddokumentfluss zu trennen.

display:inline; 这个标签将会变为行内元素。
display:block; 这个标签将会变为块级元素。

Nach dem Login kopieren

(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

<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!