เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติการแสดงผลระบุชนิดของกล่องที่ใช้สำหรับองค์ประกอบ HTML
| ค่าเริ่มต้น: | inline |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | no. Read about animatable |
| เวอร์ชัน: | CSS1 |
| ไวยากรณ์ javascript: | object .style.display="none" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| display | 4.0 | 8.0 บางส่วนจาก 5.5 | 3.0 | 3.1 | 7.0 |
Note: ค่า "inline-table" , "table" , "table-caption" , "table-cell" , "table-column" , "table-column-group" , "table-row" และ "table-row-group" ยังไม่ได้รับการสนับสนุนใน IE7 และก่อนหน้านี้ IE8 ต้องมี! DOCTYPE IE9 สนับสนุนค่า
หมายเหตุ: ค่า "flex" และ "inline-flex" ต้องมีคำนำหน้าในการทำงานใน Safari สำหรับ "flex" ใช้ "display: -webkit-flex" สำหรับ "inline-flex" ใช้ "display: -webkit-inline-flex;" .
CSS ไวยากรณ์
display:value;ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | เล่น |
|---|---|---|
| inline | ค่ามาตรฐาน แสดงองค์ประกอบเป็นองค์ประกอบแบบอินไลน์ (like <span>) | เล่น " |
| block | แสดงองค์ประกอบเป็นองค์ประกอบบล็อกหนึ่ง (like <p>) | เล่น " |
| flex | แสดงองค์ประกอบเป็นระดับบล็อกภาชนะดิ้น ใหม่ใน CSS3 | |
| inline-block | แสดงองค์ประกอบเป็นภาชนะบล็อกอินไลน์ระดับ ภายในของบล็อกนี้มีรูปแบบเป็นกล่องระดับบล็อกและองค์ประกอบของตัวเองมีรูปแบบเป็นกล่องแบบอินไลน์ระดับ | |
| inline-flex | แสดงองค์ประกอบเป็นภาชนะดิ้นอินไลน์ระดับ ใหม่ใน CSS3 | |
| inline-table | องค์ประกอบที่จะแสดงเป็นตารางแบบอินไลน์ระดับ | |
| list-item | ให้องค์ประกอบประพฤติเช่น <li> องค์ประกอบ | เล่น " |
| run-in | แสดงองค์ประกอบเป็นทั้งบล็อกหรือแบบอินไลน์ขึ้นอยู่กับบริบท | |
| table | ให้องค์ประกอบประพฤติเช่น <table> องค์ประกอบ | |
| table-caption | ให้องค์ประกอบประพฤติเช่น <caption> องค์ประกอบ | |
| table-column-group | ให้องค์ประกอบประพฤติเช่น <colgroup> องค์ประกอบ | |
| table-header-group | ให้องค์ประกอบประพฤติเช่น <thead> องค์ประกอบ | |
| table-footer-group | ให้องค์ประกอบประพฤติเช่น <tfoot> องค์ประกอบ | |
| table-row-group | ให้องค์ประกอบประพฤติเช่น <tbody> องค์ประกอบ | |
| table-cell | ให้องค์ประกอบประพฤติเช่น <td> องค์ประกอบ | |
| table-column | ให้องค์ประกอบประพฤติเช่น <col> องค์ประกอบ | |
| table-row | ให้องค์ประกอบประพฤติเช่น <tr> องค์ประกอบ | |
| none | องค์ประกอบที่จะไม่แสดงที่ทุกคน (has no effect on layout) | เล่น " |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | เล่น " |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
การสาธิตวิธีการใช้มูลค่าทรัพย์สินมรดก:
body {
display: inline;
}
p {
display: inherit;
} ลองตัวเอง» ตัวอย่าง
กำหนดทิศทางของรายการที่มีความยืดหยุ่นบางส่วนภายในที่ <div> องค์ประกอบในลำดับที่กลับ:
div {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS: การแสดงผล CSS และการมองเห็น
อ้างอิง HTML DOM: display property