CSS การคำนวณของกล่อง

การใช้งานและการกำหนด

box-sizing 属性 อนุญาตให้คุณกำหนดองค์ประกอบที่ตรงกับพื้นที่

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

ดูเพิ่มเติมที่

ตัวเรียน CSS3ส่วนของตัวอักษรที่เป็นส่วนของส่วนผสม CSS3

คู่มือ HTML DOMboxSizing 属性

ตัวอย่าง

กำหนดเป็นสองกล่องที่มีขอบเขตที่แยกต่างกันและเท้ายัน

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

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

มีตัวอย่างเพิ่มเติมที่ด้านล่างของหน้า

ระบบเขียน CSS

box-sizing: content-box|border-box|inherit;

ค่าทางภาพ

ค่า รายละเอียด
content-box

นี่เป็นพฤติกรรมความกว้างและความสูงที่กำหนดโดย CSS2.1

ความกว้างและความสูงจะถูกนำไปใช้กับกล่องเนื้อหาขององค์ประกอบ

วาดของประกอบประกอบภายในความกว้างและความสูงนอก
border-box

ความกว้างและความสูงที่กำหนดขององค์ประกอบกำหนดจุดมุ่งหมายของตัวแปร border-box

นั่นคือ ของประกอบที่กำหนดให้มีเนื้อหาภายในความกว้างและความสูงที่กำหนด

เพื่อที่จะได้ความกว้างและความสูงของเนื้อหา ต้องลบเบอร์โค้ดและพื้นที่ประกอบออกจากความกว้างและความสูงที่กำหนด
inherit กำหนดให้มีค่าจากตัวแปร box-sizing ขององค์ประกอบพ่อ

รายละเอียดเทคนิค

ค่าเริ่มต้น: content-box
การสืบทอด: no
เวอร์ชั่น: CSS3
ระบบเขียน JavaScript: object.style.boxSizing="border-box"

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางบอกว่าเป็นเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่

ตัวเลขที่มี -webkit- หรือ -moz- แสดงว่าเป็นสัญลักษณ์รุ่นแรกที่ใช้คำนำหน้า

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5