องค์ประกอบ HTML ทุกอย่างมีค่า display เริ่มต้นที่ตั้งไว้และสามารถเขียนทับได้ด้วยคุณสมบัติ CSS Display เช่นเดียวกัน ความมองเห็นของทุกองค์ประกอบตั้งค่าเป็น visible เป็นค่าเริ่มต้น แต่ก็สามารถเขียนทับได้ด้วยคุณสมบัติ CSS Visibility
ค่าต่อไปนี้สำหรับคุณสมบัติ CSS Display:
| ลำดับ | ค่าและคำอธิบาย |
|---|---|
| 1 | inline แสดงองค์ประกอบเป็นองค์ประกอบ inline (เช่น <span>) คุณสมบัติ height และ width จะไม่มีผลหากกำหนด |
| 2 | block แสดงองค์ประกอบเป็นองค์ประกอบ block (เช่น <div>) และบังคับให้ขึ้นบรรทัดใหม่ |
| 3 | contents ทำให้คอนเทนเนอร์หายไป ทำให้องค์ประกอบลูกกลายเป็นลูกขององค์ประกอบระดับถัดไปใน DOM |
| 4 | flex แสดงองค์ประกอบเป็น flex container ระดับบล็อก |
| 5 | grid แสดงองค์ประกอบเป็น grid container ระดับบล็อก |
| 6 | inline-block แสดงองค์ประกอบเป็น inline-level block container องค์ประกอบจัดรูปแบบเป็น inline แต่ใช้ค่า height และ width ได้ |
| 7 | inline-flex แสดงองค์ประกอบเป็น inline-level flex container |
| 8 | inline-grid แสดงองค์ประกอบเป็น inline-level grid container |
| 9 | inline-table องค์ประกอบแสดงเป็น inline-level table |
| 10 | list-item ทำให้องค์ประกอบทำงานเหมือน <li> |
| 11 | run-in แสดงองค์ประกอบเป็น block หรือ inline ขึ้นอยู่กับบริบท |
| 12 | table ทำให้องค์ประกอบทำงานเหมือน <table> |
| 13 | table-caption ทำให้องค์ประกอบทำงานเหมือน <caption> |
| 14 | table-column-group ทำให้องค์ประกอบทำงานเหมือน <colgroup> |
| 15 | table-header-group ทำให้องค์ประกอบทำงานเหมือน <thead> |
| 16 | table-footer-group ทำให้องค์ประกอบทำงานเหมือน <tfoot> |
| 17 | table-row-group ทำให้องค์ประกอบทำงานเหมือน <tbody> |
| 18 | table-cell ทำให้องค์ประกอบทำงานเหมือน <td> |
| 19 | table-column ทำให้องค์ประกอบทำงานเหมือน <col> |
| 20 | table-row ทำให้องค์ประกอบทำงานเหมือน >tr< element |
| 21 | none องค์ประกอบไม่ถูกแสดงบนหน้า |
| 22 | initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| 23 | inherit กำหนดว่าคุณสมบัติ display ขององค์ประกอบมาจากองค์ประกอบพาเรนต์ |
ลองดูตัวอย่างของ CSS display inline-block:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <title>CSS Display Inline-Block</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; box-sizing: border-box; } input[type="button"] { border-radius: 10px; } .child{ display: inline-block; height: 40px; width: 40px; color: white; border: 4px solid black; } .child:nth-of-type(1){ background-color: #FF8A00; } .child:nth-of-type(2){ background-color: #F44336; } .child:nth-of-type(3){ background-color: #C303C3; } .child:nth-of-type(4){ background-color: #4CAF50; } .child:nth-of-type(5){ background-color: #03A9F4; } .child:nth-of-type(6){ background-color: #FEDC11; } </style> </head> <body> <form> <fieldset> <legend>CSS-Display-Inline-Block</legend> <div id="container"> <div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div> </div><br> </body> </html>
ผลลัพธ์
ค่าต่อไปนี้ของคุณสมบัติ CSS Visibility:
| ลำดับ | ค่าและคำอธิบาย |
|---|---|
| 1 | visible เป็นค่าเริ่มต้น องค์ประกอบและลูกของมันมองเห็นได้ |
| 2 | hidden ซ่อนองค์ประกอบและลูกของมันมองไม่เห็น แต่องค์ประกอบยังถูกแสดงและได้พื้นที่ที่เหมาะสมบนหน้า |
| 3 | collapse ใช้เฉพาะสำหรับแถวตาราง (<tr>), กลุ่มแถว (<tbody>), คอลัมน์ (<col>), กลุ่มคอลัมน์ (<colgroup>) ค่านี้ลบแถวหรือคอลัมน์ออก และพื้นที่ที่ถูกใช้โดยแถวหรือคอลัมน์จะพร้อมสำหรับเนื้อหาอื่น หากใช้กับองค์ประกอบอื่น จะแสดงเป็น 'hidden' |
| 4 | initial ตั้งค่าความมองเห็นขององค์ประกอบเป็นค่าเริ่มต้น |
| 5 | inherit ระบุว่าค่าของคุณสมบัติ visibility ควรสืบทอดจากองค์ประกอบพาเรนต์ |
ลองดูตัวอย่างของคุณสมบัติ CSS Visibility:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <title>CSS Visibility collapse</title> <style> form ,table{ width:70%; margin: 0 auto; text-align: center; } table, th, td { border-collapse: collapse; border: 1px solid black; } thead { background-color: goldenrod; } tbody{ background-color: khaki; } tr:nth-of-type(3){ visibility: collapse; } </style> </head> <body> <form> <fieldset> <legend>CSS-Visibility-collapse</legend> <table> <thead> <tr><th>Name</th><th>Course</th></tr> </thead> <tbody> <tr><td>Joana</td><td>MBA</td></tr> <tr><td>Smith</td><td>B.Arc</td></tr> <tr><td>Xersus</td><td>M.Sc</td></tr> </tbody> </table> </fieldset> </form> </body> </html>
ผลลัพธ์
CSS Visibility collapse ไม่ได้ถูกใช้:
CSS Visibility collapse ถูกใช้:
