CSS3 กล่องขนาดคุณสมบัติ
ตัวอย่าง
สองกล่องชายแดนกำหนด:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
ลอง»
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก
属性 | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
แอตทริบิวต์คำจำกัดความและคำแนะนำ
คุณสมบัติกล่องปรับขนาดช่วยให้คุณกำหนดองค์ประกอบบางอย่างในทางที่จะปรับให้เข้ากับพื้นที่ที่กำหนด
ตัวอย่างเช่นถ้าคุณต้องการที่จะวางสองเคียงข้างกับกล่องชายแดนโดยกล่องปรับขนาดที่ "ชายแดนกล่อง" นี้สามารถทำให้เบราว์เซอร์แสดงกล่องที่มีความกว้างและความสูงที่กำหนดและชายแดนและการขยายเข้าไปในกล่อง
เริ่มต้น: | เนื้อหากล่อง |
---|---|
มรดก: | ไม่ |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | วัตถุ .style.boxSizing = "border-กล่อง" |
ไวยากรณ์
กล่องปรับขนาด: เนื้อหากล่อง | ชายแดนกล่อง | สืบทอด:
ความคุ้มค่า | คำอธิบาย |
---|---|
เนื้อหากล่อง | นี่คือการทำงานของความกว้างและความสูงที่ระบุ CSS2.1 องค์ประกอบความกว้างและความสูง (นาที / แอตทริบิวต์สูงสุด) เหมาะสำหรับการระบุความกว้างและความสูงของกล่อง padding และเส้นขอบและการวาดภาพรูปแบบที่ระบุความกว้างและความสูงขององค์ประกอบยกเว้น |
ชายแดนกล่อง | ระบุความกว้างและความสูง (นาที / แอตทริบิวต์แม็กซ์) เพื่อตรวจสอบกล่องชายแดนองค์ประกอบของ ในคำอื่น ๆ องค์ประกอบที่ระบุไว้กว้างและความสูงรวมทั้งการกำหนดของช่องว่างภายในและชายแดน ความกว้างและความสูงของเนื้อหาลบด้านที่เกี่ยวข้องของชายแดนและกรอกคำนวณจากความกว้าง "width" และ "ความสูง" แอตทริบิวต์ที่ระบุ |
สืบทอด | ราคาระบุคุณสมบัติกล่องขนาดควรได้รับการสืบทอดมาจากองค์ประกอบหลัก |
บทความที่เกี่ยวข้อง
CSS3 กวดวิชา: CSS3 ส่วนติดต่อผู้ใช้