Ausführliche Erklärung der Zeilenhöhe in CSS (Codebeispiel)-CSS-Tutorial-php.cn

Ausführliche Erklärung der Zeilenhöhe in CSS (Codebeispiel)

云罗郡主

Freigeben： 2018-11-30 16:28:36

Original

2799 Leute haben es durchsucht

Wie die Höhe eines Elements bestimmt wird, ist für uns eine große Hilfe bei der Lösung von Seitendarstellungsproblemen und dem Layout der Seite. Die herkömmliche Operationsleistung besteht darin, das Höhenattribut für ein Element auf Blockebene festzulegen, dann hat es eine Höhe:

<style>
  .test {
    border: 1px solid #ccc;
    height: 100px;
    width: 100px;
  }
</style>
<body>
  <div class="test"></div>
</body>

Nach dem Login kopieren

Wenn wir jedoch die Höhe für das Element nicht festlegen, ist dies nach allgemeinem Wissen der Fall Inhalt im Element erhält das Element immer noch die Höhe erreicht:

<style>
  .test {
    border: 1px solid #ccc;
    width: 100px;
  }
</style>
<body>
  <div class="test">1</div>
</body>

Nach dem Login kopieren

Ausführliche Erklärung der Zeilenhöhe in CSS (Codebeispiel)

Warum erhält das Div die Höhe nicht, weil der Text die Höhe unterstützt, sondern weil die Zeile- height unterstützt das div. Vergleichen Sie die Codes an beiden Enden

.test {
    border: 1px solid #ccc;
    width: 100px;
    line-height: 100px;
  }
</style>
<body>
  <div class="test">1</div>
</body>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Ausführliche Erklärung der Zeilenhöhe in CSS (Codebeispiel)

.test {
    border: 1px solid #ccc;
    width: 100px;
    line-height: 0;
  }
</style>
<body>
  <div class="test">1</div>
</body>

Nach dem Login kopieren

Das offensichtliche Ergebnis ist, dass es einen gibt Höhe aufgrund der Höhe und Höhe ohne Höhe aufgrund der Zeilenhöhe. Die detaillierteren Details zur Höhe liegen tatsächlich darin, dass jede Textzeile über ein Zeilenfeld verfügt und diese Felder natürlich die Höhe des übergeordneten Elements unterstützen.

Gleichzeitig können Sie beim Betrachten des obigen Beispiels feststellen, dass sich die Mittellinie des Textes und die Mittellinie der Zeilenhöhe an derselben Position befinden, sodass es eine häufig verwendete Zentrierungsmethode gibt:

<style>
  .test {
    line-height: 100px;
    height: 100px;
  }
</style>

Nach dem Login kopieren

Wenn Sie die Zeilenhöhe und den gleichen Wert wie die Höhe festlegen, kann der Text vertikal zentriert werden.

Aus den Ergebnissen geht hervor, dass dies tatsächlich der Fall ist, aber dieser Satz ist falsch Es ist überhaupt nicht erforderlich, die Höhe festzulegen. Nur die Zeilenhöhe kann den Text vertikal zentrieren.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der Zeilenhöhe in CSS (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!