CSS Box Sizing

CSS Box Sizing

คำแนะนำหลักสูตร box-sizing CSS

มีคุณสมบัติที่อนุญาตให้เรารวม padding (padding) และ border ในความกว้างและความสูงทั้งหมดขององค์ประกอบ

หากไม่กำหนดคุณสมบัติ CSS box-sizing

  • โดยมาตรฐาน ความกว้างและความสูงขององค์ประกอบคำนวณดังนี้:
  • width + padding + border = ความกว้างที่แท้จริงขององค์ประกอบ

height + padding + border = ความสูงที่แท้จริงขององค์ประกอบ

นี่หมายความว่า: เมื่อคุณกำหนดความกว้าง/ความสูงขององค์ประกอบ องค์ประกอบมักดูใหญ่กว่าที่คุณกำหนด (เพราะ border และ padding ขององค์ประกอบได้ถูกเพิ่มเข้าไปในความกว้าง/ความสูงที่กำหนด)

ภาพด้านล่างแสดงสอง <div> อิเลย์ที่มีความกว้างและความสูงที่กำหนดเหมือนกัน:
นี่เป็น div ที่เล็กกว่า
（ความกว้าง 300px และความสูง 100px）。
นี่เป็น div ที่ใหญ่ขึ้น

（ความกว้างเท่ากัน 300px และความสูง 100px）。

ตัวอย่าง

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

ทดลองด้วยตัวเอง

box-sizing ตัวอย่างสอง <div> อิเลย์นี้แสดงขนาดต่างกันในทางที่สุด (เพราะ div2 กำหนด padding):

มีคุณสมบัติที่แก้ปัญหานี้

box-sizing มีคุณสมบัติที่อนุญาตให้เรารวมความกว้างและความสูงขององค์ประกอบทั้งหมด

เช่น box-sizing: border-box;เมื่อกำหนดค่าในตัวแปร

ขณะนี้ขนาดของ div สองตัวเท่ากัน!
Hooray!

ตัวอย่างนี้เหมือนตัวอย่างที่แล้ว สอง <div> อิเลย์ตัวนี้ตั้งค่า box-sizing: border-box;：

ตัวอย่าง

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

ทดลองด้วยตัวเอง

เนื่องจากใช้งาน box-sizing: border-box; และหลายนักพัฒนาต้องการให้ทุกองค์ประกอบบนหน้าเว็บทุกองค์ประกอบทำงานด้วยวิธีนี้

รหัสที่มีอยู่ด้านล่างนี้สามารถใช้ปรับขนาดของทุกองค์ประกอบในวิธีที่เห็นได้ชัดเจนตามที่กล่าวข้างต้นได้ หลายเบราเซอร์ได้ใช้มันอย่างดีสำหรับหลายองค์ประกอบของฟอร์ม box-sizing: border-box;(แต่ไม่ใช่ทุกองค์ประกอบ - นี่เป็นเหตุผลที่ทำให้ input และ textarea ดูแตกต่างเมื่อใช้ width: 100%; )

ใช้มันสำหรับทุกองค์ประกอบนั้นเป็นสิ่งที่ปลอดภัยและสมเหตุสมผล:

ตัวอย่าง

* {
  box-sizing: border-box;
}

ทดลองด้วยตัวเอง

CSS Box Sizing คุณสมบัติ

คุณสมบัติ การอธิบาย
box-sizing การคำนวณความกว้างและสูงขององค์ประกอบ พวกเขาควรประกอบด้วยรูปแบบเซนเซอร์ (padding) และเขตประกอบ (border) หรือไม่