CSS แสดงคุณสมบัติ
ตัวอย่าง
การใช้ค่าการแสดงผลที่แตกต่างกัน:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติdisplayระบุลักษณะการแสดงผล (ชนิดของกล่องแสดงผล) ขององค์ประกอบ
ใน HTML ค่าคุณสมบัติการแสดงเริ่มต้นจะนำมาจากข้อกำหนด HTML หรือจากสไตล์ชีตเริ่มต้นของเบราว์เซอร์/ผู้ใช้ ค่าเริ่มต้นใน XML เป็นแบบอินไลน์ รวมถึงองค์ประกอบ SVG
| ค่าเริ่มต้น: | ? |
|---|---|
| รับการถ่ายทอด: | ไม่ |
| เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
| รุ่น: | CSS1 |
| ไวยากรณ์ JavaScript: | วัตถุ .style.display="none" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 | 3.0 | 3.1 | 7.0 |
หมายเหตุ:ค่า "flex" และ "inline-flex" ต้องใช้คำนำหน้า -webkit- เพื่อทำงานใน Safari
หมายเหตุ: "display: contents" ไม่ทำงานใน Edge เวอร์ชันก่อนหน้า 79
ไวยากรณ์ CSS
display: value;
มูลค่าทรัพย์สิน
| Value | Description | Play it |
|---|---|---|
| inline | Displays an element as an inline element (like <span>). Any height and width properties will have no effect | |
| block | Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width | |
| contents | Makes the container disappear, making the child elements children of the element the next level up in the DOM | |
| flex | Displays an element as a block-level flex container | |
| grid | Displays an element as a block-level grid container | |
| inline-block | Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values | |
| inline-flex | Displays an element as an inline-level flex container | |
| inline-grid | Displays an element as an inline-level grid container | |
| inline-table | The element is displayed as an inline-level table | |
| list-item | Let the element behave like a <li> element | |
| run-in | Displays an element as either block or inline, depending on context | |
| table | Let the element behave like a <table> element | |
| table-caption | Let the element behave like a <caption> element | |
| table-column-group | Let the element behave like a <colgroup> element | |
| table-header-group | Let the element behave like a <thead> element | |
| table-footer-group | Let the element behave like a <tfoot> element | |
| table-row-group | Let the element behave like a <tbody> element | |
| table-cell | Let the element behave like a <td> element | |
| table-column | Let the element behave like a <col> element | |
| table-row | Let the element behave like a <tr> element | |
| none | The element is completely removed | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
การสาธิตวิธีการใช้ค่าคุณสมบัติเนื้อหา ในตัวอย่างต่อไปนี้ คอนเทนเนอร์ .a จะหายไป และทำให้องค์ประกอบย่อย (.b) ลูกขององค์ประกอบอยู่ในระดับถัดไปใน DOM:
.a {
display: contents;
border:
2px solid red;
background-color: #ccc;
padding: 10px;
width: 200px;
}
.b {
border: 2px solid blue;
background-color: lightblue;
padding: 10px;
}
ตัวอย่าง
การสาธิตวิธีใช้ค่าคุณสมบัติที่สืบทอดมา:
body {
display: inline;
}
p {
display: inherit;
}
ตัวอย่าง
กำหนดทิศทางของรายการที่ยืดหยุ่นภายในองค์ประกอบ <div> ในลำดับย้อนกลับ:
div {
display: flex;
flex-direction: row-reverse;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: การแสดงผล CSS และการมองเห็น
การอ้างอิง HTML DOM: แสดงคุณสมบัติ