width 宽度，css中width指的是内容的宽度，而不是盒子的宽度。 height高度 ，css中Height指的是内容的高度，而不是盒子的高度。 padding 内边距 border 边框 margin 外边距
.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+右borderDer 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;
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.
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
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><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
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.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!
