เค้าโครง CSS - คุณสมบัติ การแสดงผล
คุณสมบัติdisplayเป็นคุณสมบัติ CSS ที่สำคัญที่สุดสำหรับการควบคุมเค้าโครง
คุณสมบัติการแสดงผล
คุณสมบัติdisplayระบุว่าองค์ประกอบจะแสดงหรือไม่
องค์ประกอบ HTML ทุกรายการมีค่าแสดงเริ่มต้นขึ้นอยู่กับประเภทขององค์ประกอบ ค่าที่แสดงเริ่มต้นสำหรับองค์ประกอบส่วนใหญ่เป็นblockหรือ
inline
คลิกเพื่อแสดงแผง
This panel contains a <div> element, which is hidden by default (display: none).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block).
องค์ประกอบระดับบล็อก
องค์ประกอบระดับบล็อกจะเริ่มต้นในบรรทัดใหม่เสมอและใช้ความกว้างเต็มที่มีอยู่ (ขยายออกไปทางซ้ายและขวาเท่าที่จะทำได้)
ตัวอย่างขององค์ประกอบระดับบล็อก:
- <div>
- <h1> - <h6>
- <p>
- <แบบฟอร์ม>
- <header>
- <footer>
- <section>
องค์ประกอบแบบอินไลน์
องค์ประกอบแบบอินไลน์ไม่ได้เริ่มต้นในบรรทัดใหม่ และใช้ความกว้างเท่าที่จำเป็นเท่านั้น
นี่คือองค์ประกอบ <span> แบบอินไลน์ภายในย่อหน้า
ตัวอย่างขององค์ประกอบแบบอินไลน์:
- <span>
- <a>
- <img>
จอแสดงผล: ไม่มี;
display: none;มักใช้กับ JavaScript เพื่อซ่อนและแสดงองค์ประกอบโดยไม่ต้องลบและสร้างใหม่ ดูตัวอย่างสุดท้ายของเราในหน้านี้ หากคุณต้องการทราบว่าสิ่งนี้สามารถทำได้อย่างไร
องค์ประกอบ<script>ใช้display: none;
เป็นค่าเริ่มต้น
แทนที่ค่าที่แสดงเริ่มต้น
ดังที่กล่าวไว้ ทุกองค์ประกอบมีค่าแสดงเริ่มต้น อย่างไรก็ตาม คุณสามารถแทนที่สิ่งนี้ได้
การเปลี่ยนองค์ประกอบแบบอินไลน์เป็นองค์ประกอบบล็อก หรือในทางกลับกัน อาจมีประโยชน์ในการทำให้หน้าเว็บมีลักษณะเฉพาะ และยังคงเป็นไปตามมาตรฐานของเว็บ
ตัวอย่างทั่วไปคือการสร้าง<li>องค์ประกอบแบบอินไลน์สำหรับเมนูแนวนอน:
ตัวอย่าง
li {
display: inline;
}
หมายเหตุ:การตั้งค่าคุณสมบัติการแสดงผลขององค์ประกอบจะเปลี่ยนวิธีการแสดง องค์ประกอบเท่านั้น ไม่ใช่องค์ประกอบประเภทใด ดังนั้นองค์ประกอบแบบอินไลน์ด้วยdisplay: block;จะไม่ได้รับอนุญาตให้มีองค์ประกอบบล็อกอื่นๆ อยู่ภายใน
ตัวอย่างต่อไปนี้แสดงองค์ประกอบ <span> เป็นองค์ประกอบบล็อก:
ตัวอย่าง
span {
display: block;
}
ตัวอย่างต่อไปนี้แสดงองค์ประกอบ <a> เป็นองค์ประกอบบล็อก:
ตัวอย่าง
a {
display: block;
}
ซ่อนองค์ประกอบ - display:none หรือมองเห็น:hidden?
display:none
visibility:hidden
รีเซ็ต
การซ่อนองค์ประกอบสามารถทำได้โดยการตั้งค่าdisplayคุณสมบัติ
noneเป็น องค์ประกอบจะถูกซ่อนและหน้าจะแสดงราวกับว่าองค์ประกอบนั้นไม่มีอยู่:
ตัวอย่าง
h1.hidden {
display: none;
}
visibility:hidden; ยังซ่อนองค์ประกอบ
อย่างไรก็ตาม องค์ประกอบจะยังคงใช้พื้นที่เท่าเดิม องค์ประกอบจะถูกซ่อนแต่ยังคงส่งผลต่อการจัดวาง:
ตัวอย่าง
h1.hidden {
visibility: hidden;
}
ตัวอย่างเพิ่มเติม
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |