ซีเอสเอแบบกล่อง
องค์ประกอบ HTML ทั้งหมดถือได้ว่าเป็นกล่อง ใน CSS, คำว่า "รูปแบบกล่อง" จะใช้เมื่อมีการพูดคุยเกี่ยวกับการออกแบบและรูปแบบ
รูปแบบกล่อง CSS เป็นหลักกล่องที่ล้อมรอบองค์ประกอบ HTML ทุก มันประกอบด้วย: ขอบพรมแดน padding และเนื้อหาจริง
ภาพด้านล่างแสดงให้เห็นถึงรูปแบบกล่อง:
คำอธิบายของชิ้นส่วนที่แตกต่างกัน:
- เนื้อหา - เนื้อหาของกล่องที่ข้อความและภาพที่ปรากฏขึ้นจะ
- padding - ล้างพื้นที่รอบเนื้อหาช่องว่างภายในมีความโปร่งใส
- ชายแดน - ชายแดนที่จะไปรอบ padding และเนื้อหา
- Margin - ล้างพื้นที่นอกชายแดนอัตรากำไรมีความโปร่งใส
รูปแบบกล่องช่วยให้เราสามารถเพิ่มเส้นขอบรอบ ๆ องค์ประกอบและการกำหนดช่องว่างระหว่างองค์ประกอบ
ความกว้างและความสูงขององค์ประกอบ
เพื่อที่จะกำหนดความกว้างและความสูงขององค์ประกอบอย่างถูกต้องในเบราว์เซอร์ทั้งหมดที่คุณต้องรู้วิธีการทำงานแบบกล่อง
 | สำคัญ: เมื่อคุณกำหนดความกว้างและความสูงคุณสมบัติขององค์ประกอบด้วย CSS คุณเพียงแค่กำหนดความกว้างและความสูงของพื้นที่เนื้อหาการคำนวณขนาดเต็มรูปแบบขององค์ประกอบคุณยังต้องเพิ่ม padding เส้นขอบและอัตรากำไรขั้นต้น |
|---|
สมมติว่าเราต้องการที่จะสไตล์ <div> องค์ประกอบที่จะมีความกว้างรวมของ 350px:
นี่คือคณิตศาสตร์:
ความกว้างรวมขององค์ประกอบควรจะคำนวณเช่นนี้
ความกว้างรวมองค์ประกอบ = ความกว้าง + padding ซ้าย + ขวา + padding ชายแดนซ้าย + ขวา + ชายแดนขอบซ้าย + ขอบขวา
ความสูงรวมขององค์ประกอบควรจะคำนวณเช่นนี้
ความสูงรวมองค์ประกอบ = ความสูง + + padding ด้านบนด้านล่าง padding + + เส้นขอบด้านบนขอบด้านล่าง + + ขอบบนขอบด้านล่าง
| หมายเหตุสำหรับเก่า IE: Internet Explorer 8 และรุ่นก่อนหน้านี้รวมถึงการขยายและชายแดนใน width สถานที่ให้บริการ เพื่อแก้ไขปัญหานี้เพิ่ม <!DOCTYPE html> เพื่อหน้า HTML |
|---|
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»