Box Model: Box model เป็นแนวคิดพื้นฐานในการจัดวางของ CSS ที่กำหนดการจัดกล่อง (box) รอบๆองค์ประกอบ. กล่องประกอบด้วยขอบ (border), ช่องว่างระหว่างขอบและเนื้อหา (padding), ขอบกว้าง (margin) เป็นต้น โดย Box model ช่วยกำหนดพื้นที่ที่องค์ประกอบจะใช้และระยะห่างของกล่องระหว่างองค์ประกอบอื่น ๆ.
Positioning: การกำหนดตำแหน่ง (positioning) ใช้ในการวางองค์ประกอบในตำแหน่งที่ต้องการบนหน้าเว็บ. มีหลายค่าที่สามารถใช้ได้ เช่น static, relative, absolute, fixed, และ sticky. แต่ละค่าจะมีผลต่อวิธีการจัดวางและการเคลื่อนที่ขององค์ประกอบ.
Flexbox: Flexbox เป็นเทคนิคการจัดวางที่อยู่ใน CSS3 ที่มีไว้สำหรับจัดวางองค์ประกอบในแนวแกนเดียวหรือแกนเดียวกัน. แนวคิดของ Flexbox อยู่ในการใช้คุณสมบัติของ flex container และ flex items เพื่อกำหนดตำแหน่งและการจัดวางขององค์ประกอบในลักษณะที่ยืดหยุ่นและอัตโนมัติ.
Grid: Grid เป็นเทคนิคการจัดวางที่เป็นระเบียบสี่เหลี่ยมที่แน่นอนและกำหนดได้หลากหลายสำหรับการจัดวางองค์ประกอบในระบบตาราง. Grid มีคุณสมบัติที่ช่วยให้เราสามารถกำหนดแนวตั้งและแนวนอนขององค์ประกอบได้อย่างหยาบคาย.
Floats: Floats เป็นเทคนิคการจัดวางเก่าใน CSS ที่ใช้ในการวางองค์ประกอบด้านข้างขององค์ประกอบอื่น ๆ หรือกำหนดเรียงองค์ประกอบในการจัดวางหลายแถวแนวนอน.
Responsive Layouts: Responsive layouts หมายถึงการออกแบบและจัดวางเว็บไซต์ให้เข้ากับหลายขนาดของอุปกรณ์และหน้าจอ ด้วยการใช้เทคนิคของ CSS media queries เพื่อปรับเปลี่ยนรูปแบบการจัดวางขึ้นอยู่กับขนาดหน้าจอ.
นี่เป็นแค่บางตัวอย่างของเทคนิคการจัดวางใน CSS ซึ่งมีอีกมากมายขึ้นอยู่กับความซับซ้อนและความต้องการของโครงการแต่ละอย่าง.
แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ
Follow Us / Thanat Sirikitphattana