css display มีอะไรบ้าง
#พื้นฐานการเขียนเว็ปไซต์ ##cssdisplay
CSS display คือคุณสมบัติที่ใช้กำหนด รูปแบบการแสดงผล ของ HTML Element แต่ละตัว ซึ่งมีผลต่อการจัดวางองค์ประกอบ (เช่น การขึ้นบรรทัดใหม่ หรือการแสดงผลเรียงกัน) และการใช้พื้นที่บนหน้าเว็บ โดยมีค่าที่นิยมใช้เช่น block (ขึ้นบรรทัดใหม่, กินพื้นที่เต็มความกว้าง), inline (ไม่ขึ้นบรรทัดใหม่, กินพื้นที่เท่าที่ต้อง การ), inline-block (เรียงกันในบรรทัดเดียว แต่กำหนดความกว้างและสูงได้), none (ซ่อนองค์ประกอบทั้งหมด ไม่กินพื้นที่) รวมถึงค่าสำหรับเลย์เอาต์แบบซับซ้อนอย่าง flex และ grid.
คุณสมบัติพื้นฐานของ display:
display: block;:
กำหนดให้องค์ประกอบนั้นแสดงผลเหมือนบล็อก โดยจะขึ้นบรรทัดใหม่ทุกครั้ง และใช้ความกว้างเต็มที่เท่าที่สามารถทำได้.
สามารถกำหนดค่า width, height, margin, และ padding ได้.
ตัวอย่าง block-level element โดยธรรมชาติคือ <div> หรือ <p>.
display: inline;:
กำหนดให้องค์ประกอบแสดงผลแบบอินไลน์ คือไม่ขึ้นบรรทัดใหม่ และจะกินพื้นที่เท่าที่องค์ประกอบนั้นต้องการเท่านั้น.
ไม่สามารถกำหนด width และ height ได้โดยตรง เพราะไม่ได้กินพื้นที่เต็มความกว้าง.
ตัวอย่าง inline-level element โดยธรรมชาติคือ <span>, <a>, หรือ <img>.
display: inline-block;:
เป็นการผสมผสานระหว่าง inline และ block.
องค์ประกอบจะเรียงต่อกันในบรรทัดเดียวกันเหมือน inline แต่สามารถกำหนด width, height, margin, และ padding ได้เหมือน block.
display: none;:
ใช้ซ่อนองค์ประกอบอย่างสมบูรณ์ ไม่เพียงแต่จะหายไปจากหน้าจอ แต่จะ ไม่กินพื้นที่ใดๆ บนหน้าเว็บเลย ราวกับว่าองค์ประกอบนั้นไม่มีอยู่จริง.
display สำหรับการจัดเลย์เอาต์ที่ซับซ้อน:
นอกจากคุณสมบัติพื้นฐาน ยังมีค่าอื่น ๆ ที่ใช้สำหรับการจัดเลย์เอาต์แบบใหม่ ๆ:
display: flex;:
ใช้สำหรับสร้างเลย์เอาต์แบบ Flexbox เพื่อจัดวางองค์ประกอบในทิศทางเดียว (แถวหรือคอลัมน์) ได้อย่างยืดหยุ่น.
display: grid;:
ใช้สำหรับสร้างเลย์เอาต์แบบ CSS Grid ที่สามารถควบคุมการจัดวางองค์ประกอบทั้งในแนวแกนแถว (row) และคอลัมน์ (column) พร้อมกันได้.
คุณสมบัติ display มีความสำคัญมากในการควบคุมรูปลักษณ์และพฤติกรรมการแสดงผลขององค์ประกอบบนเว็บเพจ ทำให้เราสามารถสร้างเว็บไซต์ที่มีโครงสร้างที่ดี และมีประสบการณ์ผู้ใช้ (UX) ที่น่าประทับใจได้
เวลาเจอคำว่า CSS display หลายคนจะนึกถึงแค่ inline กับ block แต่พอทำหน้าเว็บจริง ๆ จะเริ่มสับสนว่า “ทำไมมันไม่ขึ้นบรรทัดใหม่?” “ทำไมกำหนด width ไม่ได้?” หรือ “ซ่อนแล้วมันยังเว้นที่ว่างอยู่ไหม?” อันนี้คือสิ่งที่ฉันใช้เช็กเป็นขั้น ๆ เวลาจัดเลย์เอาต์ 1) เช็กก่อนว่า element ตัวนั้นเป็นอะไรโดยธรรมชาติ - div, p มักเป็น block อยู่แล้ว เลยขึ้นบรรทัดใหม่อัตโนมัติ - span, a มักเป็น inline เลยเรียงต่อกัน และ width/height ไม่ค่อยมีผล ถ้าอยากให้ลิงก์ (<a>) คลิกง่ายขึ้น (พื้นที่ใหญ่ขึ้น) ฉันมักเปลี่ยนเป็น display: inline-block; หรือ block; แล้วค่อยใส่ padding 2) ความต่างที่เจอบ่อย: inline vs inline-block vs block - inline: ไม่ขึ้นบรรทัดใหม่ และขนาดขึ้นกับเนื้อหา (กำหนด width/height ตรง ๆ ไม่ค่อยได้) - inline-block: ไม่ขึ้นบรรทัดใหม่เหมือน inline แต่กำหนด width/height ได้ ใช้ทำปุ่ม เมนู หรือ badge บ่อยมาก - block: ขึ้นบรรทัดใหม่ กินความกว้างเต็มแถว (ตามพื้นที่ที่มี) เหมาะกับ section ต่าง ๆ ของหน้าเว็บ ทริคที่ช่วยชีวิต: ถ้าอยากให้หลายกล่องเรียงกันแต่ยังคุมขนาดเองได้ ให้ลอง inline-block ก่อน (โดยเฉพาะงานง่าย ๆ) 3) display: none; ซ่อนแบบ “หายไปจริง” display: none; คือซ่อนและไม่กินพื้นที่บนหน้าเว็บเลย เหมือนไม่มี element นั้นอยู่ เหมาะกับการซ่อนเมนู/ปุ่มชั่วคราว ถ้าต้องการ “ซ่อนแต่ยังเว้นที่ไว้” (เช่น กันเลย์เอาต์กระโดด) ปกติจะใช้ visibility: hidden; แทน (อันนี้หลายคนชอบสับสน) 4) ตัวอย่าง layout แบบ display: block + inline-block (ง่ายและเร็ว) ฉันมักทำการ์ดสินค้า/บล็อกเล็ก ๆ แบบนี้: - กล่องการ์ดใช้ display: inline-block; - กำหนด width เช่น 200px และ margin ให้มีช่องว่าง เหมาะกับงานที่ไม่ต้อง responsive ซับซ้อนมาก แต่ถ้าจอเล็กแล้วอยากให้จัดเรียงยืดหยุ่น แนะนำไปทาง flex/grid จะคล่องกว่า 5) เริ่มจัดเลย์เอาต์จริงจัง: flex กับ grid ใช้ต่างกันยังไง - display: flex; เหมาะกับการจัดเรียง “แนวเดียว” เป็นหลัก (แถวหรือคอลัมน์) เช่น แถบเมนู ปุ่มเรียงกัน กล่องซ้าย-ขวา และจัดกึ่งกลางแนวตั้ง/แนวนอนได้ง่าย - display: grid; เหมาะกับเลย์เอาต์แบบ “ตาราง” คุมทั้งแถวและคอลัมน์พร้อมกัน เช่น หน้า dashboard, gallery, layout หลายคอลัมน์ที่ต้องกำหนดสัดส่วนชัด ๆ ถ้างานเป็นแถวเดียวฉันจะเริ่มที่ flex ก่อน แต่ถ้าต้องวางเป็นช่อง ๆ หลายมิติ grid จะตรงโจทย์กว่า 6) ใช้ .style.display (JavaScript) เวลาโชว์/ซ่อน ถ้าคุณทำปุ่มกดแล้วให้กล่องแสดง/หาย มักเจอการตั้งค่า element.style.display = 'none'; และตอนโชว์กลับเป็น 'block' หรือ 'flex' ข้อควรระวังจากที่เคยพลาด: ตอนโชว์กลับควรคืนค่าให้ถูกกับเลย์เอาต์เดิม (เช่น เดิมเป็น flex ก็ต้องกลับเป็น flex ไม่งั้น layout จะเพี้ยน) สรุปจำง่ายจากภาพรวม 6 แบบหลัก: none, inline, block, inline-block, flex, grid - จัดตัวอักษร/ลิงก์: เริ่มจาก inline/inline-block - ทำโครงหน้าเว็บเป็นส่วน ๆ: block - ซ่อนแบบไม่เหลือพื้นที่: none - จัดเรียงยืดหยุ่น: flex - ทำตารางเลย์เอาต์: grid
