CSS display 属性

Definasyon at Paggamit

Ang katangian ng display ay nagtutukoy sa uri ng box na gagawa ng elemento.

Paliwanag

Ang katangian na ito ay ginagamit upang tukuyin ang uri ng display box na ginagawa ng elemento sa panahon ng pagbuo ng layout. Para sa mga uri ng dokumento tulad ng HTML, maaaring maging mapanganib ang paggamit ng display ng walang pag-iingat dahil maaaring masira ang nakatalagang display hierarchy sa HTML. Para sa XML, dahil walang nakalipas na hierarchy ang XML, ang display ay lubos na kinakailangan.

Paliwanag:Sa CSS2 mayroon ang halaga ng compact at marker, ngunit dahil sa kakulangan ng malawak na suporta, ito ay inalis sa CSS2.1.

Para sa ibang pagkakatuturo:

CSS Tutorial:CSS Positioning

HTML DOM Reference Manual:Display Attribute

Mga Halimbawa

Huwagang gumawa ng inline na bawat linya:

p.inline
  {
  display:inline;
  }

Subukan ang sarili

CSS Grammar

display: value;

Halagang Atributo

Halaga Paglalarawan
none Ang elemento na ito ay hindi magiging magpakita.
block Ang elemento na ito ay magiging bloke element, may pagpalit ng linya sa harap at likod ng elemento.
inline Default. Ang elemento na ito ay magiging inline element, walang pagpalit ng linya sa harap at likod ng elemento.
inline-block Inline bloke element. (Bagong halaga sa CSS2.1)
list-item Ang elemento na ito ay magiging bilang listahan.
run-in Ang elemento na ito ay magpapakita bilang bloke o inline element base sa konteksto.
compact Sa CSS mayroon ang halaga ng compact, ngunit dahil sa kakulangan ng malawak na suporta, ito ay inalis sa CSS2.1.
marker Mayroon pang halaga ng marker sa CSS, ngunit dahil sa kakulangan ng pangunahing suporta, naalis na ito sa CSS2.1.
table Ang elemento na ito ay magiging block table na ipinapakita (katulad ng <table>), may tabi sa unahan at sa huli ng talahanapan.
inline-table Ang elemento na ito ay magiging inline table na ipinapakita (katulad ng <table>), walang tabi sa unahan at sa huli ng talahanapan.
table-row-group Ang elemento na ito ay magiging group ng row na ipinapakita (katulad ng <tbody>)
table-header-group Ang elemento na ito ay magiging group ng row na ipinapakita (katulad ng <thead>)
table-footer-group Ang elemento na ito ay magiging group ng row na ipinapakita (katulad ng <tfoot>)
table-row Ang elemento na ito ay magiging table row na ipinapakita (katulad ng <tr>)
table-column-group Ang elemento na ito ay magiging group ng column na ipinapakita (katulad ng <colgroup>)
table-column Ang elemento na ito ay magiging table column na ipinapakita (katulad ng <col>)
table-cell Ang elemento na ito ay magiging table cell na ipinapakita (katulad ng <td> at <th>)
table-caption Ang elemento na ito ay magiging table caption na ipinapakita (katulad ng <caption>)
inherit Ipinatawag na dapat magsuporta ang display property mula sa parehong elemento.

Detalye ng Teknolohiya

Default na Halaga: inline
Inherencya: hindi
Bersyon: CSS1
Grammar ng JavaScript: object.style.display="inline"

TIY Mga Halimbawa

Kung paano ipakita ang elemento bilang isang inline na elemento
Ito ay nagpakita kung paano ipakita ang elemento bilang isang inline na elemento.
Kung paano ipakita ang elemento bilang isang bloke na elemento
Ito ay nagpakita kung paano ipakita ang elemento bilang isang bloke na elemento.

Suporta ng Browser

Ang numero sa talahanapan ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa katangian.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

Paliwanag:Kung tinukoy ang !DOCTYPE, sinusuportahan ng Internet Explorer 8 (at mas mataas na bersyon) ang halagang "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", at ang "inherit".