รูปแบบกล่อง CSS
รูปแบบกล่อง CSS (แบบกล่อง)
องค์ประกอบ HTML ทั้งหมดถือได้ว่าเป็นกล่องใน CSS, "รูปแบบกล่อง" เป็นคำที่ใช้ในการออกแบบและรูปแบบที่จะใช้เมื่อ
มันเป็นกล่องบรรจุกล่องแบบรอบองค์ประกอบ HTML CSS ในธรรมชาติรวมทั้ง: ขอบพรมแดน padding และเนื้อหาจริง
รูปแบบกล่องช่วยให้เราช่องว่างระหว่างองค์ประกอบอื่น ๆ และวางอยู่รอบองค์ประกอบชายแดนองค์ประกอบของ
ภาพด้านล่างแสดงให้เห็นถึงรูปแบบกล่อง (กล่อง Model):
ส่วนต่าง ๆ ของคำอธิบาย:
- อัตรากำไรขั้นต้น (Margin) - เคลียร์พื้นที่นอกชายแดนอัตรากำไรขั้นต้นมีความโปร่งใส
- ชายแดน (Border) - รอบขอบด้านในและเนื้อหาของเส้นขอบภายนอก
- padding (ขยาย) - เคลียร์พื้นที่รอบ ๆ เนื้อหารองมีความโปร่งใส
- เนื้อหา (Content) - เนื้อหาของกล่องเพื่อแสดงข้อความและภาพ
สำหรับความกว้างและความสูงขององค์ประกอบในเบราว์เซอร์ทั้งหมดที่มีการตั้งค่าอย่างถูกต้องคุณจำเป็นต้องรู้วิธีการทำงานแบบกล่อง
ความกว้างและความสูงขององค์ประกอบ
สำคัญ: เมื่อคุณระบุความกว้างองค์ประกอบ CSS และแอตทริบิวต์สูงคุณเพียงแค่กำหนดความกว้างและความสูงของพื้นที่เนื้อหาคุณจะรู้ว่าขนาดเต็มขององค์ประกอบที่คุณยังต้องเพิ่ม padding ชายแดนและอัตรากำไรขั้นต้น .
ความกว้างทั้งหมดขององค์ประกอบในตัวอย่างด้านล่างคือ 300px:
padding:10px;
border:5px solid gray;
margin:10px;
ลองมาทำคณิตศาสตร์:
250px (กว้าง)
+ 20px (ซ้าย + ขวา padding)
+ 10px (ซ้าย + ขวาชายแดน)
+ 20px (ซ้าย + ขวาขอบ)
= 300px
ลองนึกภาพคุณมีเพียง 250 พิกเซลของพื้นที่ ขอให้เราตั้งค่าความกว้างทั้งหมดขององค์ประกอบ 250 พิกเซล
ความกว้างรวมขององค์ประกอบสุดท้ายของสูตรนี้คือ:
ความกว้างทั้งหมดขององค์ประกอบ = padding ซ้าย + ความกว้าง padding ขวา + + + ชายแดนด้านซ้าย + ขวาของช่องจากซ้าย + ขอบขวา
ความสูงรวมขององค์ประกอบสูตรการคำนวณขั้นสุดท้ายคือ:
ความสูงรวมขององค์ประกอบ = ความสูง + padding บนเส้นขอบด้านล่าง + padding + + + + ขอบด้านล่างขอบบนขอบล่าง
ปัญหาความเข้ากันได้เบราว์เซอร์
เมื่อหน้านี้มีการตั้งค่าเป็น DTD เหมาะสมเบราว์เซอร์ส่วนใหญ่จะเป็นไปตามที่ไอคอนด้านบนเพื่อแสดงเนื้อหาได้ อย่างไรก็ตาม IE แสดงผลไม่ถูกต้อง. 5 และ 6 ตามข้อกำหนดของ W3C พื้นที่ที่ถูกครอบครองโดยเนื้อหาองค์ประกอบที่ถูกกำหนดโดยคุณสมบัติความกว้างและ padding และเส้นขอบรอบ ๆ เนื้อหามีการคำนวณอีก แต่น่าเสียดายที่ IE5.X 6 และใช้รูปแบบของตัวเองที่ไม่ได้มาตรฐานในโหมดแปลก ความกว้างของเบราว์เซอร์เหล่านี้แอตทริบิวต์ความกว้างไม่เนื้อหา แต่เนื้อหาผลรวมของการขยายพรมแดนความกว้าง
แม้ว่าจะมีวิธีการแก้ปัญหานี้ แต่ทางออกที่ดีที่สุดคือการหลีกเลี่ยงปัญหานี้ นั่นคือไม่ได้เพิ่มขยายไปยังองค์ประกอบที่มีความกว้างที่ระบุ แต่พยายามที่จะเพิ่มช่องว่างหรืออัตรากำไรขั้นต้นที่จะองค์ประกอบหลักและองค์ประกอบเด็ก
คุณสมบัติกว้าง IE8 และรุ่นก่อนหน้าของ IE ไม่สนับสนุนการขยายความกว้างและชายแดน
แก้กันไม่ได้ IE8 และปัญหาก่อนหน้านี้สามารถประกาศหน้า HTML <! DOCTYPE html> สามารถ