Latest web development tutorials

ขนาดของกล่อง CSS3

CSS3 box-sizing คุณสมบัติการกำหนดความกว้างและความสูงแอตทริบิวต์มีช่องว่าง (ช่องว่าง) และชายแดน (ชายแดน)

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นทรัพย์สิน

ทันทีหลังจากที่เบราว์เซอร์จำนวน -webkit- หรือ -moz- คำนำหน้าระบุ

คุณสมบัติ
กล่องขนาด 10.0
4.0 -webkit- 		8.0 29.0
2.0 -moz- 		5.1
3.1 -webkit- 		9.5

อย่าใช้ CSS3 กล่องขนาดคุณสมบัติ

โดยค่าเริ่มต้นความกว้างและองค์ประกอบคอมพิวเตอร์วิธีที่ระดับ high-end เป็นดังนี้:

ความกว้าง (กว้าง) + padding (ขยาย) + ชายแดน (ชายแดน) = องค์ประกอบความกว้างที่เกิดขึ้นจริง

ความสูง (สูง) + padding (ขยาย) + ชายแดน (ชายแดน) = ความสูงที่แท้จริงขององค์ประกอบ

ซึ่งหมายความว่าเมื่อเรากำหนดองค์ประกอบของความกว้าง / ความสูงความสูงจอแสดงผลขององค์ประกอบและความกว้างจะมีขนาดใหญ่ (เพราะองค์ประกอบชายแดนกับ padding จะคำนวณความกว้าง / ความสูง)

นี่คือกล่องขนาดเล็ก (กว้าง 300px สูง 100px เป็น)

นี่คือกล่องขนาดใหญ่ (ความกว้าง 300px สูง 100px เป็น)

สองคนนี้ <div> แม้จะกว้างและความสูงการตั้งค่าเหมือนกัน แต่ขนาดของการแสดงจริงไม่สอดคล้องกันเพราะ div2 padding ระบุ

ตัวอย่าง

.div1 {
width: 300px;
ความสูง: 100px;
ชายแดน: 1px ของแข็งสีฟ้า;
}

.div2 {
width: 300px;
ความสูง: 100px;
padding: 50px;
ชายแดน: 1px ของแข็งสีแดง;
}

ลอง»

หากคุณต้องการที่จะใช้วิธีการนี้จะได้รับกล่องที่มีขนาดเล็กและมีอยู่ภายในขอบคุณต้องคำนึงถึงพรมแดนและอยู่ในความกว้างขอบ

CSS3 box-sizing คุณสมบัติเป็นทางออกที่ดีในการแก้ไขปัญหานี้

ใช้ CSS3 คุณสมบัติกล่องขนาด

CSS3 box-sizing แอตทริบิวต์มีช่องว่าง (ช่องว่าง) และชายแดน (ชายแดน) ในความกว้างและความสูงขององค์ประกอบ

หากคุณตั้งอยู่บนองค์ประกอบ box-sizing: border-box; ช่องว่างภายใน (ช่องว่าง) และชายแดน (ชายแดน) ยังรวมอยู่ในความกว้างและความสูงของ:

สอง div ตอนนี้เป็นขนาดเดียวกัน!

กวดวิชานี้!

นี่คือสอง <div> จะมีการเพิ่ม box-sizing: border-box; คุณสมบัติของตัวอย่างง่ายๆ

ตัวอย่าง

.div1 {
width: 300px;
ความสูง: 100px;
ชายแดน: 1px ของแข็งสีฟ้า;
กล่องปรับขนาด: ชายแดนกล่อง;
}

.div2 {
width: 300px;
ความสูง: 100px;
padding: 50px;
ชายแดน: 1px ของแข็งสีแดง;
กล่องปรับขนาด: ชายแดนกล่อง;
}

ลอง»

ตัดสินจากผลของ box-sizing: border-box; ผลลัพธ์ที่ดีกว่าก็ยังเป็นจำนวนมากของนักพัฒนาต้อง

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

องค์ประกอบทั้งหมดโดยใช้กล่องปรับขนาดจะแนะนำเพิ่มเติมได้ที่:

ตัวอย่าง

* {
กล่องปรับขนาด: ชายแดนกล่อง;
}

ลอง»