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

Detaillierte Erklärung des Höhenattributs in CSS

迷茫Original: 2017-03-25 14:12:142730Durchsuche

Verzeichnisstruktur:

Inhaltsstruktur [-]

Höhenattributwerttypliste

tr>

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>

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>

Leser können im

Chr

<body id="b">

ome-Browser „F12“ drücken und „Element“ zum Anzeigen auswählen Finden Sie schnell heraus, dass die Höhe von e388a4556c0f65e1904146cc1a846bee genau 50 % des übergeordneten Elements 6c04bd5ca3fcae76e30b72ad730ca86d 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!

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 Teiler mithilfe von CSSNächster Artikel：So implementieren Sie Teiler mithilfe von CSS

In Verbindung stehende Artikel

Mehr sehen