CSS Part 02

ใน CSS ทุกๆ element บนหน้าเว็บจะถูกมองว่าเป็น "กล่อง" สี่เหลี่ยม หรือที่เรียกว่า Box Model ซึ่งประกอบด้วย 4 ส่วนหลักๆ เรียงจากในไปนอก ดังนี้

• Content: ส่วนของเนื้อหาจริงๆ เช่น ข้อความ หรือ รูปภาพ
• Padding: พื้นที่ว่าง "ภายใน" ขอบของกล่อง เป็นช่องว่างระหว่างเนื้อหากับเส้นขอบ
• Border: เส้นขอบที่ล้อมรอบ Content และ Padding
• Margin: พื้นที่ว่าง "ภายนอก" เส้นขอบ เป็นระยะห่างระหว่างกล่องของเรากับ element อื่นๆ

/* ตัวอย่างการกำหนดค่า Box Model */
.box-example {
    width: 300px;
    padding: 20px; /* ระยะห่างภายในทุกด้าน */
    border: 10px solid black; /* เส้นขอบ */
    margin: 30px; /* ระยะห่างภายนอกทุกด้าน */
}

property display ใช้สำหรับกำหนดลักษณะการแสดงผลของ element ว่าจะเป็นแบบใด ซึ่งค่าที่ใช้บ่อยที่สุดคือ:

• block: element จะกินพื้นที่เต็มความกว้างของ container และจะขึ้นบรรทัดใหม่เสมอ (เช่น <div>, <p>, <h1>)
• inline: element จะกินพื้นที่เท่าที่จำเป็นและไม่ขึ้นบรรทัดใหม่ จะเรียงต่อกันไปในบรรทัดเดียวกัน (เช่น <span>, <a>, <strong>)
• inline-block: เป็นการผสมผสานระหว่าง block และ inline คือ element จะไม่ขึ้นบรรทัดใหม่ แต่เราสามารถกำหนด `width` และ `height` ได้
• none: ซ่อน element นั้นๆ ไปจากหน้าเว็บ
• flex: ทำให้ element นั้นกลายเป็น Flex container เพื่อจัดเรียง element ภายในด้วย Flexbox (จะกล่าวถึงในหัวข้อถัดไป)

เป็นการควบคุมตำแหน่งของ element บนหน้าเว็บให้ 벗어จากการจัดเรียงตามปกติ

Floating

ใช้ property float (ค่า left หรือ right) เพื่อย้าย element ไปชิดซ้ายหรือขวาของ container และทำให้เนื้อหาอื่นๆ ไหลล้อมรอบได้ เหมาะสำหรับการทำ layout ที่มีรูปภาพและข้อความล้อมรอบ

Positioning

ใช้ property position เพื่อกำหนดตำแหน่งของ element ได้อย่างอิสระมากขึ้น โดยทำงานร่วมกับ top, right, bottom, left

static

เป็นค่าเริ่มต้น element จะถูกจัดเรียงตามปกติ

relative

element จะถูกขยับ "เทียบกับตำแหน่งเดิม" ของมัน แต่ยังคงเหลือพื้นที่เดิมไว้

absolute

element จะถูกขยับ "เทียบกับ parent element ที่มี position ไม่ใช่ static" และจะหลุดออกจาก flow ปกติของหน้าเว็บ

fixed

element จะถูกยึดตำแหน่งไว้ "เทียบกับหน้าจอ (viewport)" และจะไม่เลื่อนตามการ scroll

sticky

เป็นการผสมระหว่าง `relative` และ `fixed` โดย element จะเป็น `relative` จนกระทั่ง scroll ไปถึงจุดที่กำหนด แล้วจะกลายเป็น `fixed`

Flexible Box Layout (Flexbox) เป็นเครื่องมือที่ทรงพลังใน CSS3 สำหรับการสร้าง layout ที่มีความยืดหยุ่น สามารถจัดเรียง, จัดตำแหน่ง และกระจายพื้นที่ระหว่าง element ภายใน container ได้อย่างง่ายดาย แม้ขนาดของ element จะไม่แน่นอน

การใช้งานจะเริ่มต้นด้วยการกำหนด display: flex; ให้กับ element แม่ (เรียกว่า flex container) และ element ลูกที่อยู่ภายใน (เรียกว่า flex items) ก็จะถูกจัดเรียงตามกฎของ flexbox ทันที

Properties for Flex Container

• flex-direction: กำหนดทิศทางการเรียงของ items (row, column, row-reverse, column-reverse)
• justify-content: จัดตำแหน่ง items ใน "แกนหลัก" (เช่น flex-start, flex-end, center, space-between, space-around)
• align-items: จัดตำแหน่ง items ใน "แกนตั้งฉาก" (เช่น stretch, flex-start, center, flex-end)
• flex-wrap: กำหนดว่าจะให้ items ขึ้นบรรทัดใหม่หรือไม่เมื่อพื้นที่ไม่พอ (nowrap, wrap)