Heim > Web-Frontend > CSS-Tutorial > Detaillierte Erklärung des Höhenattributs in CSS

Detaillierte Erklärung des Höhenattributs in CSS

迷茫
Freigeben: 2017-03-25 14:12:14
Original
2772 Leute haben es durchsucht

Verzeichnisstruktur:

Inhaltsstruktur [-]

Höhenattributwerttypliste

value describtion
auto 默认
length 绝对长度
% 相对长度
inherit 继承
Wert

Beschreibung
auto

Standard

Länge

td>

Absolute Länge
%

Relative Länge
<!DOCTYPE html><html>
  <head>
    <title>height.html</title>
    <meta name="content-type" content="text/html; charset=UTF-8"><style>p{
  width:50%;
  height:50%;
  border:1px solid red;}body{
  border:1px solid green;
  display:block;
  height:100px;}</style></head><body><p>I am box with width 50% and height 50%</p></body></html>
Nach dem Login kopieren
< /td>

erben

Erben

Hier stellt der Autor hauptsächlich die Verwendung der relativen Länge vor. Weitere Informationen zur absoluten Länge finden Sie in der ausführlichen Erklärung der CSS-Größeneinheit px % em rem.

Verwendung des %-Wertes der Höhe

Definition: Dieser Wert ist ein Prozentsatz, der auf dem Prozentsatz des Elements auf Blockebene basiert, das ihn enthält .

Beispiel:

<body id="b" style="width:0px;height:0px;">
<br>
<p id="er" style="width:50%;height:50%;border:1px solid red;"></p>
Nach dem Login kopieren

Leser können im

Chr
<body id="b">
Nach dem Login kopieren
ome-Browser „F12“ drücken und „Element“ zum Anzeigen auswählen Finden Sie schnell heraus, dass die Höhe von

genau 50 % des übergeordneten Elements beträgt. Dinge, die Sie beachten solltenIm obigen Beispiel überprüfen wir „Verstehen“. die Verwendung des relativen Wertes der Höhe. Der Leser muss jedoch beachten, dass die Höhe des untergeordneten Elements mithilfe des Prozentsatzes nicht funktioniert, wenn das übergeordnete Element die Höhe nicht definiert. Zu diesem Zeitpunkt entspricht der Höhenwert dem automatischen Wert, es sei denn, er wird durch einen absoluten Wert geändert . Die Tatsache, dass die Höhe hier nicht definiert ist, bedeutet, dass die Höhe überhaupt nicht geschrieben wird, was sich von der Definition der Höhe als 0 Pixel unterscheidet. Leser können den folgenden Code ausprobieren: Entfernen Sie dann das Stilattribut des Körpers und versuchen Sie es erneut.

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Höhenattributs in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage