So verwenden Sie die Anzeige in CSS-CSS-Tutorial-php.cn

So verwenden Sie die Anzeige in CSS

清浅

Freigeben： 2018-11-21 14:13:56

Original

10996 Leute haben es durchsucht

Die häufig verwendeten Attributwerte der Anzeige sind Block auf Blockebene, Inline auf Zeilenebene, Inline-Block auf Zeilenblockebene und Keine sowie Zeilen- oder Blockebene. Ebenenbeschriftungen können durch Anzeige konvertiert werden

In diesem Artikel wird das Anzeigeattribut in CSS geteilt, das einen bestimmten Referenzwert hat.

Wir verwenden normalerweise die Werte block, none, inline und inline im Anzeigeattribut beim Erstellen von CSS-Layouts. Heute lernen wir, wie man sie verwendet

Anzeigeattribut

Das Anzeigeattribut kann mehrere Werte haben, die am häufigsten verwendeten sind jedoch wie folgt:

keine: Dieses Element wird nicht angezeigt.

Block: Dieses Element wird als Element auf Blockebene angezeigt, mit Zeilenumbrüchen vor und nach diesem Element.

inline: Dieses Element wird als Inline-Element angezeigt, ohne Zeilenumbrüche vor und nach dem Element.

inline-block: Inline-Blockelement, das sowohl Attribute auf Blockebene als auch Attribute auf Zeilenebene aufweist.

In diesem Artikel werde ich „block“, „inline“, „inline-block“ und „none“ im Detail vorstellen.

display: block

Eigenschaften: Belegt eine Zeile für sich, Breite und Höhe können über CSS geändert werden

Häufig verwendete Elemente auf Blockebene: div, p, ul, li, ol, form, address

Anzeige:inline

Eigenschaften: Der Inhalt bestimmt die Größe, Breite und Höhe können nicht über CSS geändert werden

Häufig verwendete Elemente auf Zeilenebene: span , strong, em, a, del

<style>
	div{
		background-color: pink;
	}
	span{
		background-color: yellow;
	}
	</style>
</head>
<body>		
	<div>123</div>//块级元素
 <p><span class="span">hello</span>world</p>//行级元素

Nach dem Login kopieren

Wie im Bild oben gezeigt, können Sie sehen, dass das Blockelement die gesamte Breite der Linie einnimmt. Wenn Sie es sich als width:100% vorstellen, ergibt sich Folgendes Der Inhalt sollte mit einer neuen Zeile beginnen

Das Element auf Zeilenebene zeigt nur seinen eigenen Teil an. Der Inhalt belegt keine Zeile des

Rendering

Image 13.jpg

Elementkonvertierung auf Zeilenblockebene

(1) Elemente auf Blockebene in Elemente auf Zeilenebene konvertieren

Anzeige für Elemente auf Blockebene festlegen: inline

Das Ergebnis sieht so aus

Image 15.jpg

(2) Zeilenebene Konvertieren Sie das Element in Blockebene

Setze display:block

zum Element auf Zeilenebene und das Ergebnis ist wie folgt

Image 16.jpg

display:inline-block

Gemeinsamer Inline-Block Elemente: img, input

Eigenschaften: Der Inhalt bestimmt die Größe, Breite und Höhe können geändert werden

<style>
	span{
		background-color: yellow;
		display:inline-block;//设置行块级元素
		width:100px;
		height:30px;
	}
	</style>
</head>
<body>		
 <p><span class="span">hello</span>world</p>

Nach dem Login kopieren

Rendering

Der Unterschied zwischen Anzeige: keine und Sichtbarkeit: ausgeblendet

Anzeige: keine wird verwendet, um Elemente auszublenden. Es ist nicht nur unsichtbar, sondern nimmt auch keinen Platz ein

Sichtbarkeit: Ausgeblendet kann auch verwendet werden, um Elemente auszublenden, aber sie existieren immer noch, obwohl sie unsichtbar sind und ein Leerzeichen hinterlassen

Beispiel

Anzeige: keine

 .span{
   background-color: aquamarine;
  display:none;}
	</style>
</head>
<body>		
 <p><span class="span">hello</span>world</p>

Nach dem Login kopieren

Rendering

Image 12.jpg

Hallo ist ausgeblendet, hinterlässt aber keinen Platz

Sichtbarkeit: ausgeblendet

<style>
 .span{
  background-color: pink;
   visibility: hidden;}
</style>
</head>
<body>
 <p><span class="span">hello</span>world</p>

Nach dem Login kopieren

Effektbild

Image 11.jpg

Hallo ist ausgeblendet, aber es ist noch Platz frei

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass dies der Fall sein wird nützlich für alle, um Hilfe zu lernen

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