Was sind die Attributwerte des Anzeigeattributs in HTML? Was ist die Bedeutung? Und wie erreicht das Anzeigeattribut in HTML eine horizontale und vertikale Zentrierung? Der heutige Artikel stellt Ihnen den Wert des Anzeigeattributs in HTML vor und erläutert, wie Sie die horizontale und vertikale Zentrierung des Werts des Anzeigeattributs in HTML erreichen.
display Hier spreche ich über die vier am häufigsten verwendeten Attributwerte Inline, Block, Inlin-Block und None.
Lassen Sie uns zunächst über Inline (n Inline-Element) sprechen:
Der Wert dieses Attributs ist der Standardwert. Dieses Element wird als Inline-Element ohne Zeilenumbrüche vor oder nach dem Element angezeigt. Dieser Attributwert ist im Allgemeinen nicht festgelegt. Nach meinem persönlichen Verständnis unterscheidet es sich nicht von normalen Inline-Elementen, die häufiger verwendet werden.
Dann gibt es den Attributwert von Block (Block-Level-Element):
Dieser Attributwert ist interessanter. Er wird so eingestellt, dass er das Block-Level-Element ist belegt in Bezug auf Zeilenumbrüche eine exklusive Zeile. Der Effekt ist der gleiche wie der des p-Tags, aber nachdem dieser Attributwert festgelegt wurde, hat er als Element auf Blockebene Breite, Höhe und den Abstand dazwischen Es und andere Elemente auf Blockebene können die Randattributeinstellung und die Abstandseinstellung padding festlegen, können jedoch die Zeilenhöhe nicht festlegen.
Es gibt auch den Attributwert von inline-block:
Dieser Attributwert ist im Grunde relativ mächtig, als ich anfing, diesen Attributwert zu lernen Solange es nicht umgebrochen wird, kann es einerseits als Element auf Blockebene verwendet werden und die Eigenschaften eines Blocks aufweisen. Andererseits ist es problematisch, da ich ein Anfänger bin Um die Mitte festzulegen, können alle, die diesen Attributwert verwenden, die Zeilenhöhe so einstellen, dass der Text zur einfacheren Verwendung zentriert ist.
Diese Attribute sind sehr nützlich für die Implementierung dieser Navigationsleiste. Die beiden Attributwerte „Block“ und „Inline-Block“ werden hauptsächlich als Implementierung mehrerer Elemente in verwendet Dieselbe Zeile und Block wird als Implementierung von Zeilenumbrüchen zwischen Elementen verwendet. Jeder kann es versuchen.
Für den letzten None-Attributwert:
Ich persönlich denke, dass es bequemer ist, Elemente auszublenden, wenn die Maus schwebt, um dies zu erreichen Anzeige. Effekt mit versteckten Elementen.
Was sind die häufig verwendeten Werte für die Anzeige in HTML?
Die Anzeige in HTML ist in der normalen Projektentwicklung relativ einfach zu verwenden. Die Hauptwerte sind:
none (das Element wird nicht angezeigt);
block (das Element wird als angezeigt). Element auf Blockebene, und dem Element werden Zeilenumbrüche vorangestellt und gefolgt);
inline (das Element wird als Inline-Element ohne Zeilenumbrüche davor und danach angezeigt das Element);
inline-block (Inline-Blockelement. Neuer Wert in CSS2.1);
table (das Element wird wird als Tabelle auf Blockebene angezeigt, ähnlich wie
| und | ).
Horizontale und vertikale Zentrierung des Displays! Verwenden Sie Position und Rand, um Elemente horizontal und vertikal zu zentrieren. Ich glaube, jeder ist damit vertraut und verwendet es häufig. Aber ich frage mich, ob Sie jemals display:table und table-cell verwendet haben, um Elemente horizontal und vertikal zu zentrieren? Es gibt zwei Möglichkeiten, display:table-cell zu verwenden, um Elemente horizontal und vertikal zu zentrieren: 1. Verwenden Sie display:table und table-cell, um Elemente horizontal und vertikal zu zentrieren Struktur: <div class="wrap"> <div class="box"> <div class="con">梦幻雪冰</div> </div> </div> Nach dem Login kopieren Stil: .wrap {
/*让元素以表格形式渲染*/
display: table;
height: 400px;
width: 400px;
background: #fcf;
}
.box {
/*让元素以表格的单元素格形式渲染*/
display: table-cell;
/*使用元素的垂直对齐*/
vertical-align: middle;
}
.con {
width: 200px;
height: 200px;
margin: 0 auto;
background: #999;
}Nach dem Login kopieren Vorteile: Diese Methode hat nicht die gleiche Höhe wie die beiden vorherigen Methoden Die Methode kann die Höhe entsprechend dem Inhalt des Elements dynamisch ändern, sodass es keine Platzbeschränkung gibt. Der Inhalt des Elements wird nicht abgeschnitten oder aufgrund von Platzmangel werden hässliche Bildlaufleisten angezeigt. Nachteile: Was sind die Mängel? Diese Methode ist nur für moderne Browser geeignet und funktioniert unter IE6-7 nicht richtig. 2. Verwenden Sie display: table-cell, um Elemente horizontal und vertikal zu zentrieren Struktur: <div class="wrap"> <div class="box"> 梦幻雪冰 </div> </div> Nach dem Login kopieren Stil: .wrap {
display: table-cell;
width: 400px;
height: 400px;
background: #fcf;
vertical-align: middle;
}
.box {
width: 200px;
height: 200px;
margin: 0 auto;
background: #999;
}Nach dem Login kopieren Vorteile: Die Vorteile dieser Methode sind die gleichen wie bei Methode drei, und es gibt keine Höhenbeschränkungen. Nachteile: IE6 und IE7 werden nicht unterstützt [Verwandte Empfehlungen] Was ist Web in HTML5? Was sind die Elemente im Webspeicher? Was sind die Attribute des HTML-IMG-Tags? Erfahren Sie, wie Sie das IMG-Tag verwenden Das obige ist der detaillierte Inhalt vonWas sind die Attributwerte des Anzeigeattributs in HTML? Wie erreicht das Anzeigeattribut eine horizontale und vertikale Zentrierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Verwandte Etiketten：
Quelle：php.cn
Vorheriger Artikel：Analyse von Browser-Kernel- und Browser-Kompatibilitätsproblemen
Nächster Artikel：Was sind die spezifischen Unterschiede zwischen der Verwendung von XHTML und HTML und wie kann man sie unterscheiden?
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
Neueste Artikel des Autors
Aktuelle Ausgaben
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
|
|---|
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
