ดูขนาดของกล่อง CSS3
เมื่อไม่นานมานี้เมื่อเราสร้าง กล่อง ในหน้าเว็บสมมติว่ามี div, เราระบุ 100px สำหรับทั้งความกว้างและความสูงตามด้วย การขยายความ สำหรับ 10px และพรมแดนประมาณ 10px เช่นกัน.
div width: 100px; ความสูง: 100px; การขยาย: 10px; เส้นขอบ: 10px solid #eaeaea;
เบราว์เซอร์จะขยายขนาดของกล่องเป็น 140px โดยที่จำนวนนี้ 140px ของความกว้าง / ความสูงทั้งหมดประกอบขึ้นจากการเพิ่ม การขยายความ และ พรมแดน ดังนี้ 100px [width / height] + (2 x 10px [padding]) + (2 x 10px [border]).
อย่างไรก็ตามบางครั้งผลลัพธ์นี้ไม่ใช่สิ่งที่เราคาดหวัง บางครั้งเราจำเป็นต้องมีกล่องเสมอ 100px โดยไม่คำนึงถึงช่องว่างภายในหรือเพิ่มเส้นขอบ.
เพื่อเอาชนะปัญหาที่เกิดขึ้นซ้ำ ๆ เมื่อสร้างเค้าโครงหน้าเว็บเราสามารถใช้ CSS3 กล่องขนาด คุณสมบัติในการควบคุมวิธีการ รูปแบบกล่อง CSS ควรทำงานในเบราว์เซอร์.
การใช้ขนาดกล่อง
กล่องขนาด สถานที่ให้บริการมีสองตัวเลือกค่าแรก เนื้อหากล่อง; ซึ่งเป็นค่าเริ่มต้นเมื่อใช้ค่านี้แบบจำลองกล่องจะทำงานตามที่เราได้อธิบายไว้ข้างต้น.
และอันที่สองก็คือ ชายแดนกล่อง, โดยที่จะคำนวณขนาดของกล่อง โดยย่อขนาดของเนื้อหาที่ระบุ ด้วยการเสริมเต็มและเพิ่มขอบ.
div width: 100px; ความสูง: 100px; การขยาย: 10px; เส้นขอบ: 10px solid #eaeaea; ขนาดกล่อง: ชายแดนกล่อง; -moz-box-sizing: border-box; / * Firefox 1-3 * / -webkit-box sizing: border-box / * Safari * /
ตัวอย่างเช่นเมื่อเรามีกล่องเหมือนที่เราได้อธิบายไว้ข้างต้น (100px สี่เหลี่ยมจัตุรัสที่มี 10 พิกเซลสำหรับการขยายและขอบ) ขนาดของเนื้อหาจะลดลง 60px, และขนาดทั้งหมดของกล่องยังคงอยู่ 100px, โดยที่สมการของการลบสามารถอธิบายได้ดังนี้ 100px [width / height] - ((2 x 10px [padding]) + (2 x 10px [เส้นขอบ])).
- การสาธิต
- แหล่งดาวน์โหลด
รองรับเบราว์เซอร์
กล่องขนาด คุณสมบัติคือ รองรับทุกเบราว์เซอร์; Firefox 3.6+, Safari 3, Opera 8.5+ และ Internet Explorer 8 ขึ้นไป.
ดังนั้นหากคุณรู้ว่าผู้เยี่ยมชมส่วนใหญ่ของคุณจะไม่ใช้ Internet Explorer เวอร์ชันต่ำกว่า 8 คุณสามารถใช้คำแนะนำที่มีประโยชน์นี้ (ขอบคุณ Paul Irish).
* ขนาดกล่อง: เส้นขอบกล่อง; -moz-box-sizing: border-box; / * Firefox 1-3 * / -webkit-box sizing: border-box / * Safari * /
ตัวอย่างด้านบนจะใช้กับ กล่องขนาด คุณสมบัติให้กับองค์ประกอบทั้งหมดในหน้าเว็บของคุณ.
ตัวอย่าง
ในส่วนนี้เราจะแสดงตัวอย่างชีวิตจริงเกี่ยวกับวิธีการใช้ประโยชน์จากสิ่งนี้ กล่องขนาด คุณสมบัติ เราจะสร้างการนำทางอย่างง่ายโดยอิงตามมาร์กอัพ HTML ด้านล่างพร้อมเมนูลิงก์ห้ารายการ.
จากนั้นเราจะเพิ่มสไตล์การตกแต่งบางอย่าง; เช่นตั้งค่าการนำทาง แก้ไขความกว้างสำหรับ 500px และ ความกว้างของลิงค์ละ 100px, จากนั้นอินไลน์ไอเท็มรายการและให้พื้นหลังที่แตกต่างกันสำหรับแต่ละลิงค์เมนูเพื่อให้คุณเห็นความแตกต่างระหว่างพวกเขา.
nav width: 500px; กำไร: 50px อัตโนมัติ 0; ความสูง: 50px; nav ul padding: 0; กำไรขั้นต้น: 0; nav li ลอย: ซ้าย; นำทาง display: inline-block; ความกว้าง: 100px; ความสูง: 100%; สีพื้นหลัง: #ccc; สี: # 555; การตกแต่งข้อความ: ไม่มี; ตระกูลฟอนต์: Arial, sans-serif; ขนาดตัวอักษร: 12pt; ความสูงของเส้น: 300%; จัดข้อความ: ศูนย์; นำทาง display: inline-block; ความกว้าง: 100px; ความสูง: 100%; สี: # 555; การตกแต่งข้อความ: ไม่มี; ตระกูลฟอนต์: Arial, sans-serif; nav li: nth-child (1) a background-color: # E9E9E9; ขอบซ้าย: 0; nav li: nth-child (2) a background-color: # E4E4E4; nav li: nth-child (3) a background-color: #DFDFDF; nav li: nth-child (4) a background-color: # D9D9D9; nav li: nth-child (5) a background-color: # D4D4D4; ขอบขวา: 0;
ณ จุดนี้การนำทางของเราดูเหมือนปกติ.
อย่างไรก็ตามปัญหาจะเกิดขึ้นเมื่อเราเพิ่มเส้นขอบซ้ายหรือขวาลงในเมนูลิงค์.
นำทาง border-left: 1px solid #aaa; ขอบขวา: 1px solid # f3f3f3;
เมนูจะล้นไปทางด้านล่างเนื่องจากความกว้างของลิงค์จะไม่อยู่อีกต่อไป 100px. มันคือตอนนี้ 102px, ทำให้ความกว้างทั้งหมดของการนำทางเป็น 10px อีกต่อไปแล้วเราได้ระบุไว้ข้างต้น (500px).
เพื่อเอาชนะปัญหานี้เราจำเป็นต้องใช้ กล่องขนาด ทรัพย์สินดังต่อไปนี้:
นำทาง border-left: 1px solid #aaa; ขอบขวา: 1px solid # f3f3f3; ขนาดกล่อง: ชายแดนกล่อง; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
- การสาธิต
- แหล่งดาวน์โหลด
อ่านเพิ่มเติม
และในที่สุดหากคุณเป็นประเภทที่ชอบผจญภัยและต้องการที่จะขุดลึกลงไปในเรื่องนี้เราได้รวบรวมการอ้างอิงที่เลือกไว้สำหรับคุณ:
- ทำความเข้าใจกับ CSS Box Model - Tech Republic
- บั๊กขนาดกล่องใน Firefox - BugZilla
- FTW ขนาดกล่อง - พอลไอริช
