คุณสมบัติการปรับขนาดกล่อง CSS ทำงานอย่างไร

เรียนรู้วิธีใช้ CSS box-sizing คุณสมบัติเพื่อควบคุมวิธีที่เบราว์เซอร์คำนวณและแสดงผลความกว้างและความสูงขององค์ประกอบ HTML ของคุณ

box-sizing (content-box เทียบกับ border-box)

CSS box-sizing คุณสมบัติมีสองค่า:

• content-box (ค่าเริ่มต้น)
• border-box

ค่าการปรับขนาดกล่องทั้งสองจะส่งผลต่อวิธีที่เบราว์เซอร์คำนวณและแสดงผลขนาดขององค์ประกอบ HTML แต่นั่นเป็นสิ่งเดียวที่เหมือนกัน

content-box

โดยค่าเริ่มต้น องค์ประกอบ HTML ทั้งหมดใช้ content-box ค่า:

box-sizing: content-box;

ซึ่งหมายความว่าหากคุณมีองค์ประกอบที่มีสไตล์ดังต่อไปนี้:

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
}

จากนั้น ความกว้างและความสูงขององค์ประกอบนั้นจะถูกคำนวณเป็น 134px ไม่ใช่ 100px ตามที่คุณระบุในสไตล์ชีต CSS ของคุณ ผลลัพธ์:

หากคุณต้องการตรวจสอบขนาดด้วยตัวคุณเอง ให้เปิดใช้งานเบราว์เซอร์ของคุณ ตัวตรวจสอบองค์ประกอบ ด้วยคำสั่งนี้:

• Mac:Cmd + Shift + C
• Windows:Ctrl + Shift + C

จากนั้นเลื่อนเมาส์ไปวางเหนือองค์ประกอบด้านบนเพื่อดูขนาด

สิ่งนี้เกิดขึ้นเพราะ content-box รวมค่าความกว้าง/ความสูงด้วยเส้นขอบ (1px ในแต่ละด้าน) และช่องว่างภายใน (16px ในแต่ละด้าน) ค่า และแสดงผลขนาดองค์ประกอบที่ผลรวมของค่าเหล่านั้น:

• ความกว้างขององค์ประกอบ:1 + 16 + 100 + 16 + 1 =134 พิกเซล
• ความสูงขององค์ประกอบ:1 + 16 + 100 + 16 + 1 =134 พิกเซล

ลักษณะการทำงานเริ่มต้นนี้จาก content-box ใช้งานได้ค่อนข้างน่ารำคาญ แต่โชคดีที่เปลี่ยนได้ง่าย!

ค่าเริ่มต้น box-sizing: content-box การประกาศสืบทอดมาจาก User Agent Stylesheet ซึ่งมีอยู่ในเว็บเบราว์เซอร์ทั้งหมด

border-box ช่วยชีวิต

คุณสามารถแทนที่ content-box . ได้อย่างง่ายดาย ค่าด้วย border-box ค่า ซึ่งมีผลตรงกันข้ามกับวิธีที่เบราว์เซอร์คำนวณขนาดขององค์ประกอบ:

box-sizing: border-box;

โดยการตั้งค่า box-sizing คุณสมบัติเป็น border-box เบราว์เซอร์จะแสดงองค์ประกอบของคุณที่ความกว้างและความสูงที่แม่นยำที่คุณระบุในองค์ประกอบด้วย height และ width คุณสมบัติ:

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
  box-sizing: border-box; 
}

ผลลัพธ์:

border-box ค่าทำให้เบราว์เซอร์ รวม (ไม่บวก) ค่าช่องว่างภายในและเส้นขอบที่ระบุเมื่อคำนวณความกว้างและความสูงรวมขององค์ประกอบ

ด้วย border-box ไม่ว่า padding . อันไหน หรือ border มูลค่าที่คุณเพิ่มให้กับองค์ประกอบของคุณ ขนาดรวมขององค์ประกอบจะเป็นค่าที่คุณระบุใน height และ width คุณสมบัติ

สำหรับการวัดผลที่ดี นี่คือการเปรียบเทียบแบบเคียงข้างกัน:

องค์ประกอบทั้งสองด้านบนมีความกว้างและความสูงที่ระบุ 100 พิกเซล แต่มีเพียงองค์ประกอบที่ 2 เท่านั้นที่เคารพค่าที่ระบุ เนื่องจากใช้ border-box .

content-box vs border-box สรุป:

• content-box รวมค่าช่องว่างภายในและเส้นขอบเข้ากับค่าความสูง/ความกว้างขององค์ประกอบ และแสดงผลรวม
• border-box รวมค่าการเติมและเส้นขอบเป็นส่วนหนึ่งของความกว้าง/ความสูงขององค์ประกอบ

ใช้ border-box กับทุกสิ่ง

ตอนนี้คุณรู้แล้วว่า border-box ทำให้เบราว์เซอร์แสดงผลองค์ประกอบ HTML ในขนาดจริงที่คุณระบุใน CSS ของคุณ แต่จะใช้ border-box . อย่างไร ในองค์ประกอบ HTML ทั้งหมดของคุณ?

ง่ายเหมือนการเพิ่มชุดกฎ CSS ต่อไปนี้ที่ ด้านบนสุด ของสไตล์ชีตของคุณ:

*, *:before, *:after {
  box-sizing: border-box;
}

โค้ดด้านบนใช้ตัวเลือกสากลของ CSS * เพื่อใช้ border-box ค่าให้กับ box-sizing ทรัพย์สินเมื่อ:

• ตัวเลือกองค์ประกอบปกติทั้งหมด (div , p , button , เป็นต้น)
• ทั้งหมด :before และ :after ตัวเลือกหลอก

โดยใช้ border-box ในองค์ประกอบ HTML ทั้งหมดของคุณ คุณไม่ต้องกังวลว่าเบราว์เซอร์จะแสดงขนาดขององค์ประกอบของคุณอย่างไร โดยจะเป็นความสูงและความกว้างที่คุณกำหนดไว้เสมอ