CSSเค้าโครง - สถานที่ให้บริการการแสดงผล

display คุณสมบัติเป็นคุณสมบัติที่สำคัญที่สุด CSS สำหรับรูปแบบการควบคุม

จอแสดงผลทรัพย์สิน

display คุณสมบัติระบุหาก / วิธีการที่เป็นองค์ประกอบที่จะแสดง

องค์ประกอบ HTML ทุกคนมีค่าการแสดงผลเริ่มต้นขึ้นอยู่กับชนิดขององค์ประกอบมันเป็น แสดงค่าเริ่มต้นสำหรับองค์ประกอบส่วนใหญ่เป็น block หรือ inline

คลิกเพื่อแสดงแผง

องค์ประกอบระดับบล็อก

องค์ประกอบระดับบล็อกจะเริ่มต้นในบรรทัดใหม่และจะขึ้นเต็มความกว้างใช้ได้ (เหยียดออกไปทางซ้ายและขวาเท่าที่จะสามารถทำได้)

ตัวอย่างขององค์ประกอบระดับบล็อก:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

องค์ประกอบแบบอินไลน์

องค์ประกอบแบบอินไลน์ไม่ได้เริ่มต้นในบรรทัดใหม่และใช้เวลาเพียงไม่เกินความกว้างมากที่สุดเท่าที่จำเป็น

นี้เป็นแบบอินไลน์ <span> องค์ประกอบภายในย่อหน้า

ตัวอย่างขององค์ประกอบแบบอินไลน์:

• <span>
• <a>
• <img>

display: none;

display: none; เป็นที่นิยมใช้กับงาน JavaScript เพื่อซ่อนและแสดงองค์ประกอบโดยไม่ต้องลบและสร้างให้พวกเขา ลองดูที่ตัวอย่างสุดท้ายของเราในหน้านี้ถ้าคุณต้องการที่จะรู้ว่าวิธีนี้สามารถทำได้

<script> องค์ประกอบใช้ display: none; เป็นค่าเริ่มต้นของ

แทนที่การเริ่มต้นค่าการแสดงผล

เป็นที่กล่าวถึงองค์ประกอบทุกคนมีค่าการแสดงผลเป็นค่าเริ่มต้น อย่างไรก็ตามคุณสามารถแทนที่นี้

การเปลี่ยนองค์ประกอบแบบอินไลน์กับองค์ประกอบบล็อกหรือในทางกลับกันจะมีประโยชน์สำหรับการทำหน้าดูวิธีที่เฉพาะเจาะจงและยังคงปฏิบัติตามมาตรฐานเว็บ

ตัวอย่างที่พบบ่อยคือการทำให้อินไลน์ <li> องค์ประกอบสำหรับเมนูแนวนอน:

	หมายเหตุ: การตั้งค่าการแสดงผลคุณสมบัติขององค์ประกอบเฉพาะการเปลี่ยนแปลงวิธีการที่องค์ประกอบที่จะปรากฏนั้นไม่ใช่สิ่งที่ชนิดขององค์ประกอบที่มันเป็นดังนั้นองค์ประกอบที่ใกล้เคียงกับ display: block; ไม่ได้รับอนุญาตให้มีองค์ประกอบของบล็อกอื่น ๆ ที่อยู่ภายในนั้น

แสดงตัวอย่างต่อไปนี้ <span> องค์ประกอบที่เป็นองค์ประกอบของบล็อก:

ซ่อนองค์ประกอบ - display:none หรือ visibility:hidden ?

การซ่อนองค์ประกอบสามารถทำได้โดยการตั้งค่า display คุณสมบัติเพื่อ none องค์ประกอบที่จะถูกซ่อนไว้และหน้าจะปรากฏเป็นถ้าองค์ประกอบไม่ได้มี:

visibility:hidden; ยังซ่อนองค์ประกอบ

แต่องค์ประกอบที่จะยังคงใช้พื้นที่เช่นเดียวกับก่อน องค์ประกอบที่จะถูกซ่อนไว้ แต่ยังคงส่งผลกระทบต่อรูปแบบ:

ตัวอย่างเพิ่มเติม

display: none; เมื่อเทียบกับ visibility: hidden;
ตัวอย่างนี้แสดงให้เห็นถึง display: none; เมื่อเทียบกับ visibility: hidden;

การใช้ CSS ร่วมกับจาวาสคริปต์ในการแสดงเนื้อหา
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการใช้ CSS และ JavaScript เพื่อแสดงองค์ประกอบบนคลิก

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»

CSS แสดง / คุณสมบัติของการเปิดเผย