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!