สมัครเรียนโทร. 085-350-7540 , 084-88-00-255 , ntprintf@gmail.com
เมื่อเราพูดถึงการออกแบบเว็บไซต์ หนึ่งในหัวข้อที่สำคัญที่สุดคือการจัดการกับการแสดงผลขององค์ประกอบต่างๆ และนี่คือที่มาของคำว่า "Box Model" ใน CSS โดย Box Model เป็นพื้นฐานที่สำคัญและจำเป็นในการทำให้คุณสามารถกำหนดขนาดและพื้นที่ในการแสดงผลขององค์ประกอบในหน้าเว็บได้อย่างถูกต้องและเหมาะสม
ในบทความนี้เราจะมาทำความรู้จักกับ "Content Box" ซึ่งเป็นส่วนหนึ่งของ Box Model ซึ่งมีใช้กันอย่างแพร่หลายใน CSS ปัจจุบัน
Box Model ใน CSS ประกอบด้วยส่วนต่างๆ ดังนี้
1. Content Box: เป็นส่วนที่บรรจุเนื้อหาขององค์ประกอบ ซึ่งรวมถึงข้อความ ภาพ หรืออื่นๆ 2. Padding: พื้นที่ว่างที่อยู่ด้านในของขอบเขตของ Content ที่ระหว่างเนื้อหาและเส้นขอบ (Border) 3. Border: เส้นขอบที่ล้อมรอบองค์ประกอบ 4. Margin: พื้นที่ว่างที่อยู่นอกสุดของเส้นขอบ ที่จะผลักองค์ประกอบออกจากองค์ประกอบอื่นๆ
Content Box ถือเป็นหัวใจของ Box Model เนื่องจากเป็นพื้นที่ที่บรรจุเนื้อหาภายในองค์ประกอบนั้นๆ การตั้งค่าขนาดให้กับ Content Box ไม่ได้เพียงแต่มีผลต่อลักษณะการแสดงผลเท่านั้น แต่ยังมีผลต่อการจัดเรียงและการแสดงผลเพื่อนบ้านด้วย
เมื่อคุณกำหนด `width` และ `height` ขององค์ประกอบใน CSS โดยดีฟอลต์จะหมายถึงขนาดของ Content Box ซึ่งไม่รวม Padding, Border หรือ Margin
ลองพิจารณาตัวอย่างโค้ดต่อไปนี้:
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ตัวอย่างการใช้งาน Content Box</title>
<style>
.box {
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid black;
margin: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">
นี่คือ Content Box
</div>
</body>
</html>
ในตัวอย่างนี้ เราได้กำหนด `.box` ให้มีขนาด `width` 300px และ `height` 150px แต่หากเราคำนวณขนาดโดยรวมขององค์ประกอบนี้จะเท่ากับ 300px + 40px (padding 20px x2) + 10px + 10px (margin x2) + 5px x2 (border) = 370px ในแกน X
จริงๆ แล้วคุณสามารถเปลี่ยนพฤติกรรมของ Box Model ใน CSS ได้โดยใช้ `box-sizing` property ซึ่งมีวิธีตั้งค่าดังนี้:
- `content-box` (ค่าเริ่มต้น): ขนาด `width` และ `height` กำหนดบน Content Box
- `border-box`: ขนาด `width` และ `height` รวม Padding และ Border เข้าด้วยกัน
.box {
box-sizing: border-box;
}
การใช้ `border-box` จะทำให้การคำนวณขนาดขององค์ประกอบลดความซับซ้อนลง โดยจะเป็นการรวมขนาดของ Padding และ Border เข้าไปด้วยในขนาดที่กำหนดขององค์ประกอบ
ความเข้าใจในเรื่องของ Box Model และ Content Box ถือเป็นพื้นฐานสำคัญในการเรียนรู้และพัฒนาเว็บไซต์ หากคุณต้องการที่จะพัฒนาเว็บไซต์ให้มีการจัดการ layout ที่มีประสิทธิภาพ การทำความเข้าใจเกี่ยวกับ Box Model และการใช้งาน Content Box อย่างถูกต้องถือเป็นสิ่งที่ไม่ควรละเลย
สำหรับผู้ที่มีความสนใจที่จะเพิ่มพูนความรู้ และพัฒนาทักษะในการเขียนโปรแกรม เชิญคุณมาศึกษาที่ Expert-Programming-Tutor (EPT) ซึ่งมีหลักสูตรที่ครอบคลุมเนื้อหาด้านการพัฒนาเว็บไซต์อย่างละเอียด คอร์สเรียนที่ออกแบบมาโดยเฉพาะเพื่อให้คุณก้าวสู่การเป็นนักพัฒนาเว็บไซต์มืออาชีพในอนาคตได้อย่างมั่นใจ
หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง
หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/
Tag ที่น่าสนใจ: java c# vb.net python c c++ machine_learning web database oop cloud aws ios android
หากมีข้อผิดพลาด/ต้องการพูดคุยเพิ่มเติมเกี่ยวกับบทความนี้ กรุณาแจ้งที่ http://m.me/Expert.Programming.Tutor
085-350-7540 (DTAC)
084-88-00-255 (AIS)
026-111-618
หรือทาง EMAIL: NTPRINTF@GMAIL.COM
Copyright (c) 2013 expert-programming-tutor.com. All rights reserved. | 085-350-7540 | 084-88-00-255 | ntprintf@gmail.com