CSS ฉบับการจัดระเบียบ - คุณสมบัติ display

display ความหมายของแนวแสดง display คือ CSS ของความสำคัญที่สุดสำหรับการควบคุมรูปแบบ

ความหมายของแนวแสดง display

display มีความหมายว่าจะแสดงองค์ประกอบและแบบแสดงเช่นใด

แต่ละองค์ประกอบ HTML มีค่า display โดยเริ่มต้นตามชนิดขององค์ประกอบ ส่วนใหญ่องค์ประกอบมีค่า display โดยเริ่มต้นเป็น block หรือ inline.

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

บนแผงนี้มีองค์ประกอบ <div> ซึ่งเริ่มต้นเป็นซ่อนไว้。（display: none)

มันถูกกำหนดรูปแบบโดย CSS และเราใช้ JavaScript ที่จะแสดงมัน. (เปลี่ยนเป็น display: block)

องค์ประกอบบล็อค (block element)

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

องค์ประกอบ <div> นี้เป็นองค์ประกอบบล็อค.

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

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

องค์ประกอบแนวเอก (inline element)

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

นี่คือย่อหน้าขององค์ประกอบแนวเอก <span>.

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

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

Display: none;

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

โดยมาตรฐาน<script> องค์ประกอบใช้ display: none;.

ทำให้เกินค่า Display ปริยาย

เหมือนที่กล่าวไปแล้ว องค์ประกอบทุกตัวมีค่า display ปริยายตามเอง. แต่คุณสามารถทำให้เกินค่านี้ได้.

การเปลี่ยนองค์ประกอบแนวเอกเป็นองค์ประกอบบล็อค และกลับกัน มีประโยชน์มากในการทำให้หน้าเว็บแสดงตามที่ต้องการ ขณะที่ยังคงทำตามมาตรฐานเว็บ:

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

ตัวอย่าง

li {
  display: inline;
}

ลองทดสอบด้วยตัวเอง

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

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

ตัวอย่าง

span {
  display: block;
}

ลองทดสอบด้วยตัวเอง

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

ตัวอย่าง

a {
  display: block;
}

ลองทดสอบด้วยตัวเอง

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

display: none

visibility: hidden

Reset

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

ตัวอย่าง

h1.hidden {
  display: none;
}

ลองทดสอบด้วยตัวเอง

visibility: hidden; สามารถซ่อนองค์ประกอบได้ด้วย.

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

ตัวอย่าง

h1.hidden {
  visibility: hidden;
}

ลองทดสอบด้วยตัวเอง

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

ความแตกต่างระหว่าง display: none; และ visibility: hidden;
ตัวอย่างนี้แสดงว่า display: none; VS visibility: hidden;
การใช้ CSS และ JavaScript ร่วมกันเพื่อแสดงออกเนื้อหา
ตัวอย่างนี้แสดงว่าวิธีการใช้ CSS และ JavaScript ในการแสดงออกองค์ประกอบเมื่อคลิก

CSS Display/Visibility คุณสมบัติ

คุณสมบัติ คำอธิบาย
display กำหนดว่าองค์ประกอบควรแสดงออกอย่างไร
visibility กำหนดว่าองค์ประกอบควรมีความเห็นได้หรือไม่