โมเดล Box

พอดแคสต์ CSS ตอนที่ 001: โมเดลกล่อง

สมมติว่าคุณมี 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 is awesome" ในกล่องที่มีขนาดคงที่และเส้นขอบหนา เนื่องจากกล่องมีความกว้างที่ระบุไว้ กล่องจึงมีการปรับขนาดภายนอก ซึ่งหมายความว่ากล่องจะควบคุมการปรับขนาดเนื้อหาขององค์ประกอบย่อย อย่างไรก็ตาม คำว่า "awesome" มีขนาดใหญ่เกินไปสำหรับกล่อง จึงล้นออกมานอกกล่องเส้นขอบ ของกล่องหลัก (จะอธิบายเพิ่มเติมในภายหลัง) วิธีหนึ่งในการป้องกันการล้นนี้คือการอนุญาตให้กล่องมีการปรับขนาดภายในโดยไม่ตั้งค่าความกว้าง หรือในกรณีนี้ ให้ตั้งค่า 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 กรอบติดอยู่ข้างๆ กันบนผนัง องค์ประกอบของรูปภาพที่ใส่กรอบจะสอดคล้องกับโมเดลกล่องดังนี้

• กล่องเนื้อหาคือภาพศิลปะ
• กล่องระยะห่างภายในคือกระดานรองสีขาวระหว่างกรอบกับภาพศิลปะ
• กล่องเส้นขอบคือกรอบรูป ซึ่งเป็นเส้นขอบที่แท้จริงสำหรับภาพศิลปะ
• กล่องระยะขอบคือพื้นที่ระหว่างกรอบ
• เงาใช้พื้นที่เดียวกับกล่องระยะขอบ

แก้ไขข้อบกพร่องของโมเดลกล่อง

เครื่องมือสำหรับนักพัฒนาเว็บของเบราว์เซอร์จะแสดงภาพการคำนวณโมเดลกล่องของกล่องที่เลือก ซึ่งจะช่วยให้คุณเข้าใจวิธีการทำงานของโมเดลกล่องและวิธีที่โมเดลกล่องส่งผลต่อเว็บไซต์ที่คุณกำลังทำงานอยู่

วิธีลองใช้ใน Chrome

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. เลือกองค์ประกอบ
3. แสดงโปรแกรมแก้ไขข้อบกพร่องของโมเดลกล่อง

ควบคุมโมเดลกล่อง

หากต้องการเข้าใจวิธีควบคุมโมเดลกล่อง คุณต้องเข้าใจสิ่งที่เกิดขึ้นในเบราว์เซอร์ก่อน

เบราว์เซอร์ทุกเบราว์เซอร์จะใช้สไตล์ชีต User Agent กับเอกสาร HTML สไตล์ชีตจะกำหนดลักษณะและลักษณะการทำงานขององค์ประกอบ หากองค์ประกอบไม่ได้กำหนด CSS ไว้ CSS ในสไตล์ชีต User Agent จะแตกต่างกันไปตามเบราว์เซอร์ แต่เบราว์เซอร์ทุกเบราว์เซอร์จะมีค่าเริ่มต้นที่ทำให้เนื้อหาอ่านง่ายขึ้น

สไตล์ชีต 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 ซึ่งจะบอกให้กล่องทราบวิธีคำนวณขนาดของกล่อง โดยค่าเริ่มต้น องค์ประกอบทั้งหมดจะตั้งค่าเป็น box-sizing: content-box; ซึ่งหมายความว่าเมื่อคุณตั้งค่าขนาด เช่น width และ height ขนาดเหล่านั้นจะใช้กับกล่องเนื้อหา จากนั้นหากคุณตั้งค่า padding และ border ระบบจะเพิ่มค่าเหล่านี้ลงในขนาดกล่องเนื้อหา

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับพร็อพเพอร์ตี้ที่ส่งผลต่อขนาดของโมเดลกล่อง

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

ความกว้างจริงของกล่องนี้คือ 260 พิกเซล เนื่องจาก CSS ใช้ box-sizing: content-box เริ่มต้น ความกว้างที่ใช้จึงเป็นความกว้างของเนื้อหา และระบบจะเพิ่ม padding และ border ทั้ง 2 ด้านลงในความกว้างนั้น 200 พิกเซลสำหรับเนื้อหา + 40 พิกเซลสำหรับระยะห่างภายใน + 20 พิกเซลสำหรับเส้นขอบ ทำให้ความกว้างที่มองเห็นได้ทั้งหมดเป็น 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 ซึ่งหมายความว่าตอนนี้ทุกองค์ประกอบจะใช้โมเดลกล่องทางเลือกนี้

เนื่องจากโมเดลกล่องทางเลือกคาดการณ์ได้มากกว่า นักพัฒนาเว็บจึงมักเพิ่ม กฎนี้ลงในการรีเซ็ตและการทำให้เป็นมาตรฐาน เช่น A (more) Modern CSS Reset

แหล่งข้อมูล

• ข้อมูลเบื้องต้นเกี่ยวกับโมเดลกล่อง
• เครื่องมือสำหรับนักพัฒนาเว็บของเบราว์เซอร์คืออะไร

สไตล์ชีต User Agent

• Chromium
• Firefox
• Webkit