CSS Box Sizing คืออะไร ส่วนประกอบกล่องข้อความ
CSS ย่อมาจาก Cascading Style Sheet หรือ Style sheet ที่ใช้กำหนดรูปแแบหน้าตาของไฟล์ Htmlมีสมบัติ Cascading คือ คำสั่งที่อยู่บนสุดจะทำก่อนเสมอ สามารถใช้กำหนดรูปแบบ Font สี และอื่นๆที่แสดงบนหน้าเว็บไชต์ทั้งหมด สามารถเขียน CSS ไว้ในไฟล์ HTML เลยหรือแยกเป็นไฟล์ style sheet ต่างหากแล้วเรียกใช้ภายหลังก็ได้
CSS Box Sizing คือ การกำหนดขนาดของกล่อง Element ที่ครอบ Element นั้นอยู่
หากไม่มีคุณสมบัติของ CSS box-sizing
width + padding + border คือ ความกว้างที่แท้จริงของ Element
height + padding + border คือ ความสูงที่แท้จริงของ Element
อธิบาย Boxsize
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 70px;
padding: 60px;
border: 1px solid red;
}
</style>
</head>
<body>
<br>
<div class="div1">(width is also 300px and height is 70px).</div>
</body>
</html>
ผลลัพธ์
Reference : https://www.w3schools.com/css
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML css bootstrap
