พอดแคสต์ CSS - 001: The Box Model
สมมติว่าคุณมี HTML อยู่เล็กน้อย:
<p>I am a paragraph of text that has a few words in it.</p>
จากนั้นให้เขียน CSS นี้
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
เนื้อหาจะมีความกว้าง 142 พิกเซลแทนที่จะเป็น 100 พิกเซลตามที่คุณระบุไว้ จะแยกออกจากองค์ประกอบ ทำไมจึงเป็นเช่นนั้น
รูปแบบกล่องคือรากฐานหลักของ CSS การทำความเข้าใจรูปแบบกล่อง ผลกระทบจากแง่มุมอื่นๆ ของ CSS และที่สำคัญคือ วิธีที่คุณจะควบคุมสิ่งนี้ ช่วยให้คุณเขียน CSS ที่คาดเดาได้มากขึ้น
โปรดอย่าลืมว่าทุกอย่างที่แสดงโดย CSS นั้นเป็นเพียงช่องทำเครื่องหมาย
เป็นข้อความบางส่วน หรือมี border-radius
ที่ทำให้ดูเหมือนวงกลม
เนื้อหาและขนาด
กล่องมีลักษณะการทำงานที่ต่างกันไปตามค่า display
และชุดของกล่อง
ขนาดและเนื้อหาที่มีอยู่ เนื้อหานี้อาจเป็นข้อความธรรมดา หรือ
กล่องอื่นๆ ที่สร้างโดยองค์ประกอบย่อย ไม่ว่าคุณจะเลือกแบบใด เนื้อหาก็จะส่งผลต่อขนาด
ในช่องโดยค่าเริ่มต้น
คุณควบคุมสิ่งนี้ได้โดยใช้การปรับขนาดภายนอก หรือจะใช้การปรับขนาดภายในก็ได้ เพื่อให้เบราว์เซอร์ตัดสินใจให้คุณโดยพิจารณาจากขนาดของเนื้อหา
ต่อไปนี้เป็นการสาธิตพื้นฐานที่อธิบายความแตกต่าง:
เดโมมีข้อความ "CSS ยอดเยี่ยม" อยู่ในกล่องที่มีขนาดคงที่
เส้นขอบหนา เนื่องจากกล่องนี้มีความกว้างที่ระบุไว้ กล่องจึงมีขนาดมาจากภายนอก
ซึ่งหมายความว่าช่องจะควบคุมขนาดเนื้อหาย่อย อย่างไรก็ตาม คำว่า
"เยี่ยมเลย" กล่องมีขนาดใหญ่เกินไป ข้อมูลจึงล้นออกนอกช่องระดับบนสุด
ช่องขอบ (จะมีข้อมูลเพิ่มเติมในภายหลัง) วิธีหนึ่งในการป้องกันไม่ให้เกิดส่วนเกินดังกล่าวคือ
กล่องจะมีขนาดโดยไม่จำเป็น ด้วยการไม่ได้ตั้งความกว้าง หรือในกรณีนี้
กำลังตั้งค่า width
เป็น min-content
คีย์เวิร์ด min-content
จะทำให้ช่อง
ต้องกว้างเท่ากับความกว้างต่ำสุดที่แท้จริงของเนื้อหา (คำว่า
"awesome") ซึ่งจะทำให้ช่องล้อมรอบข้อความอย่างพอดี
ด้านล่างนี้เป็นตัวอย่างที่ซับซ้อนมากขึ้นที่แสดงผลกระทบของขนาดที่ต่างกันต่อ เนื้อหา:
เปิด/ปิดการปรับขนาดตามธรรมชาติเพื่อดูว่าการปรับขนาดภายนอกช่วยให้คุณได้อะไรมากกว่า การควบคุมด้วยการปรับขนาดภายนอกและการกำหนดขนาดที่แท้จริงทำให้เนื้อหา หากต้องการดูเอฟเฟกต์ ให้เพิ่มข้อความ 2-3 ประโยคลงในการ์ด เมื่อองค์ประกอบนี้มีการปรับขนาดภายนอก ระบบจะจำกัดปริมาณเนื้อหาที่คุณ สามารถเพิ่มได้ก่อนที่จะเกินขีดจำกัด แต่จะไม่สามารถเพิ่มได้เมื่อขนาดที่แท้จริง เปิดอยู่
โดยค่าเริ่มต้น องค์ประกอบนี้มีการตั้งค่า width
และ height
จาก 400px
แต่ละรายการ
มิติข้อมูลเหล่านี้มีขอบเขตที่เข้มงวดกับทุกอย่างภายในองค์ประกอบ
เหมาะสม เว้นแต่เนื้อหาจะใหญ่เกินกว่าในกล่อง คุณจะเห็นสิ่งนี้ได้จริง
โดยเปลี่ยนคำบรรยายภาพใต้ภาพดอกไม้เป็นข้อความที่เกิน
ความสูงของกล่อง
คีย์เวิร์ด: รายการเพิ่มเติมเกิดขึ้นเมื่อเนื้อหามีขนาดใหญ่เกินไปสำหรับกล่องที่มีอยู่ คุณสามารถ
จัดการวิธีที่องค์ประกอบจัดการเนื้อหาเพิ่มเติมโดยใช้พร็อพเพอร์ตี้ overflow
การเปลี่ยนไปใช้การปรับขนาดที่แท้จริงทำให้เบราว์เซอร์สามารถตัดสินใจให้คุณโดยพิจารณาจาก ขนาดเนื้อหาของกล่อง ซึ่งทำให้การล้นลงมีโอกาสน้อยลงมากเนื่องจากช่อง ปรับขนาดได้ตามเนื้อหา
สิ่งสำคัญที่ต้องจำไว้คือการกำหนดขนาดที่แท้จริงเป็นค่าเริ่มต้นของเบราว์เซอร์ และมักจะมีความยืดหยุ่นมากกว่าการปรับขนาดภายนอก
พื้นที่ของโมเดลกล่อง
กล่องต่างๆ ประกอบด้วยพื้นที่ของโมเดลกล่องที่แตกต่างกันซึ่งล้วนมีหน้าที่เฉพาะ
กล่องเนื้อหาคือพื้นที่ที่เนื้อหานั้นอยู่ เนื้อหาสามารถ ควบคุมขนาดของหน่วยระดับบนสุด ซึ่งมักจะเป็นพื้นที่ที่มีขนาดแปรผันมากที่สุด
ช่องระยะห่างจากขอบล้อมรอบกล่องเนื้อหาและเป็นพื้นที่ว่างที่สร้างขึ้นโดย
พร็อพเพอร์ตี้ padding
เนื่องจากระยะห่างจากขอบอยู่ภายในกล่อง พื้นหลังของกล่องจึงมองเห็นได้ในพื้นที่
ที่คิดขึ้นมา
หากช่องดังกล่าวตั้งค่ากฎเพิ่มเติมไว้ เช่น overflow: auto
หรือ
overflow: scroll
แถบเลื่อนจะใช้พื้นที่นี้ด้วย
กล่องเส้นขอบล้อมรอบกล่องระยะห่างจากขอบ และพื้นที่โดยรอบจะกำหนดโดยฟังก์ชัน
border
ซึ่ง
จะสร้างเฟรมภาพสำหรับองค์ประกอบ ขอบขององค์ประกอบคือ
จำกัดสิ่งที่คุณสามารถดูได้
พื้นที่สุดท้ายหรือช่องขอบ คือพื้นที่รอบๆ กล่องของคุณ ซึ่งกำหนดโดย
กฎ margin
ของช่อง พร็อพเพอร์ตี้ เช่น
outline
และ
box-shadow
ใช้พื้นที่ตรงนี้ด้วย เนื่องจากวาดไว้ที่ด้านบนขององค์ประกอบและไม่
มีผลต่อขนาดของกล่อง กำลังเปิด outline-width
จาก 200px
ของช่อง
กล่องไม่ได้เปลี่ยนแปลงสิ่งใดภายในขอบเส้นขอบ
การอุปมาอุปไมยที่มีประโยชน์
โมเดลกล่องเข้าใจยาก ดังนั้นนี่คือการอุปมาอุปไมยที่คุณ ที่ได้เรียนรู้มาจนถึงขณะนี้
ในแผนภาพนี้ คุณมีกรอบรูป 3 กรอบอยู่ข้างกันใน หน้าจอ องค์ประกอบของรูปภาพที่อยู่ในเฟรมสอดคล้องกับโมเดลกล่องดังนี้
- กล่องเนื้อหาก็คืออาร์ตเวิร์ก
- กล่องระยะห่างจากขอบคือแผ่นยึดสีขาวที่อยู่ระหว่างกรอบและอาร์ตเวิร์ก
- กรอบเส้นขอบคือกรอบที่ให้เส้นขอบแบบตรงตัวสำหรับงานศิลปะ
- ช่องขอบคือช่องว่างระหว่างเฟรม
- เงาจะใช้พื้นที่เดียวกับช่องขอบ
แก้ไขข้อบกพร่องของโมเดลกล่อง
เครื่องมือสำหรับนักพัฒนาเว็บของเบราว์เซอร์แสดงภาพรูปแบบกล่องที่เลือก การคํานวณของ Google ซึ่งช่วยให้คุณเข้าใจวิธีการทำงานของโมเดลช่องและวิธีการทำงานของโมเดล ส่งผลต่อเว็บไซต์ที่คุณกำลังทำงานอยู่
โปรดลองดำเนินการต่อไปนี้ในเบราว์เซอร์ของคุณเอง
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- เลือกองค์ประกอบเดียว
- แสดงโปรแกรมแก้ไขข้อบกพร่องโมเดลช่อง
ควบคุมโมเดลกล่อง
ในการทำความเข้าใจวิธีควบคุมโมเดลกล่อง คุณต้องเข้าใจก่อนว่า จะเกิดขึ้นในเบราว์เซอร์ของคุณ
ทุกเบราว์เซอร์จะใช้สไตล์ชีต User Agent กับเอกสาร HTML ที่กำหนด ลักษณะที่องค์ประกอบควรมีลักษณะและลักษณะการทำงาน หากไม่ได้กำหนด CSS ไว้ CSS ใน สไตล์ชีตของ User Agent จะแตกต่างกันไปในแต่ละเบราว์เซอร์ แต่ก็ให้เหตุผล ตั้งค่าเริ่มต้นให้อ่านง่ายขึ้น
พร็อพเพอร์ตี้ 1 รายการซึ่งสไตล์ชีต User Agent จะตั้งค่า display
เริ่มต้นของกล่อง สำหรับ
เช่น สำหรับขั้นตอนปกติ ค่า display
เริ่มต้นขององค์ประกอบ <div>
จะเป็น
block
, <li>
มีค่า display
เริ่มต้นเป็น list-item
และ <span>
มีค่า display
เริ่มต้นเป็น inline
องค์ประกอบ inline
มีระยะขอบบล็อก แต่องค์ประกอบอื่นๆ ไม่ปฏิบัติตามองค์ประกอบดังกล่าว
เมื่อใช้ inline-block
องค์ประกอบอื่นๆ จะเป็นไปตามระยะขอบของบล็อก แต่องค์ประกอบแรก
ของเอลิเมนต์จะคงลักษณะการทำงานส่วนใหญ่ไว้เหมือนกับเอลิเมนต์ inline
รายการ block
จะเติมพื้นที่ในบรรทัดที่มีอยู่โดยค่าเริ่มต้น ในขณะที่
องค์ประกอบ inline
และ inline-block
มีขนาดใหญ่เท่ากับเนื้อหาเท่านั้น
นอกจากนี้ สไตล์ชีตของ User Agent ยังตั้งค่า box-sizing
ด้วย ซึ่งจะบอกวิธีทำสิ่งต่างๆ ในช่อง
คำนวณขนาดกล่อง โดยค่าเริ่มต้น องค์ประกอบทั้งหมดจะมี User Agent ต่อไปนี้
รูปแบบ: box-sizing: content-box;
นั่นหมายความว่าเมื่อคุณตั้งค่ามิติข้อมูลในลักษณะ
เป็น width
และ height
มิติข้อมูลเหล่านั้นจะมีผลกับกล่องเนื้อหา หากคุณ
จากนั้นตั้งค่า padding
และ border
ค่าเหล่านี้จะเพิ่มลงในกล่องเนื้อหา
ขนาด
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับขนาดโมเดลของกล่องที่ส่งผลต่อพร็อพเพอร์ตี้
.my-box { width: 200px; border: 10px solid; padding: 20px; }
คุณคิดว่า .my-box
จะกว้างแค่ไหน
ความกว้างที่แท้จริงของกล่องนี้คือ 260 พิกเซล
เนื่องจาก CSS ใช้ box-sizing: content-box
เริ่มต้น ความกว้างที่ใช้จึงเป็น
ความกว้างของเนื้อหา โดยบวก padding
และ border
ทั้ง 2 ด้านลงใน
ได้ 200px สำหรับเนื้อหา + ระยะห่างจากขอบ 40px + เส้นขอบ 20px รวมทั้งหมด
ความกว้างที่มองเห็นได้ 260 พิกเซล
คุณเปลี่ยนค่านี้ได้โดยระบุขนาด border-box
ดังนี้
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
รูปแบบช่องทางเลือกนี้จะบอกให้ CSS ใช้ width
กับช่องเส้นขอบ
แทนช่องเนื้อหา ซึ่งหมายความว่าborder
และpadding
ของเราจะได้รับ
พุชเข้ามา ดังนั้นเมื่อคุณตั้งค่า .my-box
ให้กว้าง 200px
ก็จะแสดงผล
กว้าง 200px
ดูวิธีการทำงานได้ในการสาธิตเชิงโต้ตอบต่อไปนี้ เมื่อคุณสลับ
box-sizing
พื้นที่สีน้ำเงินจะแสดง CSS ที่กำลังใช้ภายใน
*,
*::before,
*::after {
box-sizing: border-box;
}
กฎ CSS นี้เลือกทุกองค์ประกอบในเอกสาร
และองค์ประกอบเทียม ::before
และ ::after
ทุกรายการและใช้ box-sizing: border-box
ซึ่งหมายความว่าตอนนี้ทุกองค์ประกอบจะใช้โมเดลช่องทางเลือกนี้
เนื่องจากโมเดลกล่องตัวเลือกสามารถคาดการณ์ได้มากกว่า นักพัฒนาซอฟต์แวร์จึงมักเพิ่ม กฎนี้ในการรีเซ็ตและตัวปรับมาตรฐาน เช่นข้อนี้