Heim > Web-Frontend > CSS-Tutorial > So verwenden Sie das CSS-Anzeigeattribut

So verwenden Sie das CSS-Anzeigeattribut

silencement
Freigeben: 2019-05-27 10:40:22
Original
3862 Leute haben es durchsucht

So verwenden Sie das CSS-Anzeigeattribut

Definition und Verwendung von Anzeigeattributen

Das Anzeigeattribut wird häufig im Webseitenlayout verwendet und hat viele Attributwerte, aber das Die am häufigsten verwendeten Attributwerte sind „Block“, „Inline-Block“, „Inline“ und „Keine“. Daher konzentrieren wir uns hier auf die Verwendung dieser häufig verwendeten Attributwerte > In CSS wird das Anzeigeattribut verwendet, um den Boxtyp zu definieren, den ein Element generieren soll. Es wird häufig verwendet, um Blockelemente in Inline-Elemente, Inline-Elemente in Blockelemente oder Blockelemente/Inline-Elemente in Inline-Blockelemente umzuwandeln und das Inline-Block-Element haben sowohl die Eigenschaften von Blockelementen als auch die Eigenschaften von Inline-Elementen.

Anzeigeattribut-Syntaxformat

1.css-Syntax: display:none/inline/block/inline-block/list-item/run-in/table/inline -table/table-row-group/table-header-group/table-footer-group/table-row/table-colume-group/table-column/table-cell/table-caption/inherit

2. JavaScript-Syntax: object.style.display="inline"


Attributwertbeschreibung anzeigen

keine: Legen Sie fest, dass das Element nicht angezeigt wird

block: Legen Sie das Element als Element auf Blockebene fest.

inline: Legen Sie das Element als Inline-Element fest.

inline-block: Inline-Blockelement, das die Eigenschaften von Blockelementen aufweist und Inline-Elemente. Funktionen

list-item: Element als Liste festlegen

run-in: Je nach Kontext als Blockebenenelement oder Inline-Element anzeigen

kompakt /marker: Bereits aus CSS2 entfernt.

Tabelle in 1 löschen: Legen Sie das Element auf eine Tabelle auf Blockebene fest (ähnlich wie

), mit Zeilenumbrüchen vor und nach der Tabelle

inline-table: Setzt das Element auf eine Inline-Tabelle (ähnlich wie < ;table>), es gibt keine Zeilenumbrüche vor und nach der Tabelle

table-row-group: Setzt das Element auf eine Gruppe von eine oder mehrere Zeilen (ähnlich wie

)

table-header-group: Ähnlich wie

table-footer-group: Ähnlich wie

; Tabellenzeile: Ähnlich wie das Tag

, kein Attribut des Anzeigeattributs, wenn der Attributwert des Anzeigeattributs des Elements value

festgelegt ist Keine, das Element wird ausgeblendet und nicht angezeigt, und es wird vom Dokumentfluss getrennt und belegt nicht den sehr verwandten Platz auf der Webseite: Anzeige und CSS-versteckte Elemente Verwendungshinweise für Sichtbarkeitsattribute

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>display属性的none属性值</title>
<style type="text/css">
body{background-color: #aaa;}
.div{width:400px;height:60px;border:1px solid;margin-top:10px;}
.none{display:none;}
</style>
</head>
<body>
<div class="div">元素1</div>
<div class="div none">元素2</div>
<div class="div">元素3</div>
</body>
</html>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Anzeigeattribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage