Heim >Web-Frontend >CSS-Tutorial >Was bedeutet das Anzeigeattribut in CSS? Wie benutzt man es? [Beispielzusammenfassung]
Was bedeutet das Anzeigeattribut in CSS? Wie benutzt man es? [Beispielzusammenfassung]
- 藏色散人Original
- 2018-08-29 11:43:4120115Durchsuche
Wenn wir ein Web-Frontend entwickeln, spielen die leistungsstarken Eigenschaften von CSS natürlich eine unverzichtbare Rolle, um die Website optisch schöner und wirkungsvoller zu gestalten. Dann ist hier ein entscheidendes Attribut zu erwähnen, das CSS-Anzeigeattribut. Einige Anfänger fragen sich vielleicht: Was bedeutet Anzeige in CSS? Wie verwende ich die CSS-Anzeige?
Dieser Artikel gibt Ihnen eine detaillierte Einführung in die spezifische Verwendung des CSS-Anzeigeattributs und hofft, Ihre Fragen zu lösen. (Um das Verständnis dieses Artikels für alle zu erleichtern, wird empfohlen, meinen Artikel [Wie werden HTML-Elemente unterschieden?] zu lesen, der eine detaillierte Einführung in Elemente auf Blockebene und Inline-Elemente enthält.)
Lassen Sie mich zunächst einige häufig verwendete Werte der CSS-Anzeige auflisten: none, block, inline, inline-block
Als Nächstes erklären wir die Verwendung des CSS-Anzeigeattributs in Details durch spezifische Codebeispiele.
1. Einführung in spezifische Beispiele von CSS-Anzeigeblockattributen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:block属性实例</title>
<style>
*{padding: 0;margin:0;list-style: none;}
ul li{float: left;}
a{
display:block;
width: 30px;height: 30px;
color:#fff;
background: green;margin: 5px;
text-decoration: none;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="demo">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
</body>
</html>Der Zugriff auf den obigen Code ist wie in Abbildung dargestellt 1:
![Was bedeutet das Anzeigeattribut in CSS? Wie benutzt man es? [Beispielzusammenfassung]](https://img.php.cn//upload/image/155/181/330/1535509776826503.png "1535509776826503.png")
Wir kommentieren das display:block;-Attribut im a-Tag aus und der Effekt ist wie in Abbildung 2 dargestellt:
![Was bedeutet das Anzeigeattribut in CSS? Wie benutzt man es? [Beispielzusammenfassung]](https://img.php.cn//upload/image/408/696/456/1535509957880975.png "1535509957880975.png")
Mithilfe von Abbildung 1 und Abbildung 2 können wir dann feststellen, dass in Abbildung 1 das Element block in a die Einstellungen für Breite, Höhe sowie inneren und äußeren Rand anzeigen kann, da das Attribut display:block festgelegt ist . In Abbildung 2 wurde nur das Anzeigeblockattribut entfernt, was dazu führt, dass Breite und Höhe nicht für alle Elementblöcke festgelegt werden können.
Das heißt, das Anzeigeblockattribut kann das Inline-Element auf ein Element auf Blockebene festlegen und dann dessen Breite, Höhe, oberen, unteren, linken und rechten Rand, Abstand und Rand festlegen. Wir können dieses Attribut verwenden, um den gewünschten Effekt zu erzielen.
2. Spezifische Beispiele für CSS-Anzeige ohne Attribut
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:none属性实例</title>
<style>
*{padding: 0;margin:0;list-style: none;}
ul li{float: left;}
a{
display: none; width: 30px;height: 30px;color:#fff; background: green;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;}
</style>
</head>
<body>
<div class="demo">
<p>a元素不会显示出来</p>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
</body>
</html>Der Effekt ist wie in Abbildung 3 dargestellt:
![Was bedeutet das Anzeigeattribut in CSS? Wie benutzt man es? [Beispielzusammenfassung]](https://img.php.cn//upload/image/324/990/977/1535511221114844.png "1535511221114844.png")
Wie in Abbildung 3 zu sehen ist, sind alle seine Elemente ausgeblendet und werden nicht angezeigt, nachdem wir das Attribut display:none; Daher wird offensichtlich entschieden, dass der Wert des Anzeigeattributs das None-Attribut ist. display none wird normalerweise bei der Gestaltung der ersten und zweiten Spalte der Navigationsleiste verwendet.
3. Einführung in das CSS-Anzeige-Inline-Attribut
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:inline属性实例</title>
<style>
p {display: inline}
</style>
</head>
<body>
<p>p标签是块级元素。</p>
<p>此时显示为内联元素，不换行。</p>
</body>
</div>
</body>
</html>Der Effekt ist wie in Abbildung 4 dargestellt:
![Was bedeutet das Anzeigeattribut in CSS? Wie benutzt man es? [Beispielzusammenfassung]](https://img.php.cn//upload/image/816/646/687/1535512554851704.png "1535512554851704.png")
Sie können aus Abbildung 4 sehen. Sie wissen, dass das CSS-Display-Inline-Attribut ein Element in ein Inline-Element umwandeln kann, das heißt, ein Inline-Element, und es gibt keine Zeilenumbrüche vor und nach dem Element.
4. Einführung in das CSS-Anzeige-Inline-Block-Attribut
Wie der Name schon sagt, kombiniert das Inline-Block-Attribut definitiv die Eigenschaften der Inline- und Block-Attribute bedeutet, dass dieses Attribut das Element in ein Inline-Blockelement umwandeln kann. Sie können nicht nur die angegebenen Elemente in derselben Zeile anzeigen, sondern auch die Breite und Höhe ihrer Elemente festlegen.
Dann ist dieser Artikel eine Einführung in die spezifische Verwendung des CSS-Anzeigeattributs, einschließlich spezifischer Anwendungsbeispiele für „none“, „block“, „inline“ und „inline-block“. Es hat einen gewissen Referenzwert und ich hoffe, dass es Freunden in Not hilfreich sein wird.
Das obige ist der detaillierte Inhalt vonWas bedeutet das Anzeigeattribut in CSS? Wie benutzt man es? [Beispielzusammenfassung]. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!