CSS3 กล่องขนาด
CSS3 box-sizing คุณสมบัติช่วยให้เราสามารถรวมถึงการขยายพรมแดนความกว้างรวมขององค์ประกอบและความสูง
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
ตามด้วยหมายเลข -webkit- หรือ -moz- ระบุรุ่นแรกที่ทำงานร่วมกับคำนำหน้า
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
โดยไม่ต้อง CSS3 นี้ box-sizing ทรัพย์สิน
โดยค่าเริ่มต้นความกว้างและความสูงขององค์ประกอบที่มีการคำนวณเช่นนี้
ความกว้าง + + padding border = ความกว้างจริงขององค์ประกอบ
ความสูง + + padding border = ความสูงที่แท้จริงขององค์ประกอบ
ซึ่งหมายความว่าเมื่อคุณตั้งค่าความกว้าง / ความสูงขององค์ประกอบองค์ประกอบมักจะปรากฏใหญ่กว่าที่คุณได้ตั้ง (เพราะชายแดนองค์ประกอบและช่องว่างภายในจะมีการเพิ่มองค์ประกอบที่ระบุไว้กว้าง / สูง)
ภาพประกอบต่อไปนี้แสดงให้เห็นว่าทั้งสอง <div> องค์ประกอบที่มีความกว้างที่กำหนดและความสูงเดียวกัน:
ทั้งสอง <div> องค์ประกอบข้างต้นจบลงด้วยขนาดที่แตกต่างกันในผลที่ได้ (เพราะ div2 มี padding ระบุ):
ตัวอย่าง
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} ลองตัวเอง» ดังนั้นเป็นเวลานานนักพัฒนาเว็บได้ระบุค่าความกว้างขนาดเล็กกว่าที่พวกเขาต้องการเพราะพวกเขาจะต้องลบออก padding และเส้นขอบ
ด้วย CSS3 ที่ box-sizing คุณสมบัติแก้ปัญหานี้ได้
ด้วย CSS3 นี้ box-sizing ทรัพย์สิน
CSS3 box-sizing คุณสมบัติช่วยให้เราสามารถรวมถึงการขยายพรมแดนความกว้างรวมขององค์ประกอบและความสูง
ถ้าคุณตั้งค่า box-sizing: border-box; บน padding องค์ประกอบและชายแดนจะรวมอยู่ในความกว้างและความสูง:
นี่คือตัวอย่างเดียวกันกับข้างต้นกับ box-sizing: border-box; เพิ่มทั้ง <div> องค์ประกอบ:
ตัวอย่าง
.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; สำหรับองค์ประกอบรูปแบบจำนวนมาก ( แต่ไม่ทั้งหมด - ซึ่งเป็นเหตุผลที่ปัจจัยการผลิตและพื้นที่ข้อความลักษณะแตกต่างกันที่ความกว้าง: 100%;)
การประยุกต์ใช้นี้เพื่อองค์ประกอบทั้งหมดมีความปลอดภัยและชาญฉลาด: