โมเดล Box

สมมติว่าคุณมี 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 ที่คาดเดาได้มากขึ้น

การทำความเข้าใจรูปแบบ Box ของ CSS จะช่วยให้คุณทราบว่าเพราะเหตุใด เนื้อหาไม่พอดีกับองค์ประกอบ

โปรดอย่าลืมว่าทุกอย่างที่แสดงโดย CSS นั้นเป็นเพียงช่องทำเครื่องหมาย เป็นข้อความบางส่วน หรือมี border-radius ที่ทำให้ดูเหมือนวงกลม

เนื้อหาและขนาด

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

คุณควบคุมสิ่งนี้ได้โดยใช้การปรับขนาดภายนอก หรือจะใช้การปรับขนาดภายในก็ได้ เพื่อให้เบราว์เซอร์ตัดสินใจให้คุณโดยพิจารณาจากขนาดของเนื้อหา

ต่อไปนี้เป็นการสาธิตพื้นฐานที่อธิบายความแตกต่าง:

เมื่อกล่องมีการปรับขนาดภายนอก จะมี อยู่ที่ปริมาณเนื้อหาที่คุณสามารถเพิ่มได้ก่อนที่เนื้อหาจะล้นกล่อง ทำให้มีคำว่า "ยอดเยี่ยม" เพิ่มเติม

เดโมมีข้อความ "CSS ยอดเยี่ยม" อยู่ในกล่องที่มีขนาดคงที่ เส้นขอบหนา เนื่องจากกล่องนี้มีความกว้างที่ระบุไว้ กล่องจึงมีขนาดมาจากภายนอก ซึ่งหมายความว่าช่องจะควบคุมขนาดเนื้อหาย่อย อย่างไรก็ตาม คำว่า "เยี่ยมเลย" กล่องมีขนาดใหญ่เกินไป ข้อมูลจึงล้นออกนอกช่องระดับบนสุด ช่องขอบ (จะมีข้อมูลเพิ่มเติมในภายหลัง) วิธีหนึ่งในการป้องกันไม่ให้เกิดส่วนเกินดังกล่าวคือ กล่องจะมีขนาดโดยไม่จำเป็น ด้วยการไม่ได้ตั้งความกว้าง หรือในกรณีนี้ กำลังตั้งค่า width เป็น min-content คีย์เวิร์ด min-content จะทำให้ช่อง ต้องกว้างเท่ากับความกว้างต่ำสุดที่แท้จริงของเนื้อหา (คำว่า "awesome") ซึ่งจะทำให้ช่องล้อมรอบข้อความอย่างพอดี

ด้านล่างนี้เป็นตัวอย่างที่ซับซ้อนมากขึ้นที่แสดงผลกระทบของขนาดที่ต่างกันต่อ เนื้อหา:

การปรับขนาดภายนอกจะช่วยคุณควบคุมขนาดของ องค์ประกอบ การปรับขนาดภายในจะป้องกันไม่ให้ข้อความล้น

เปิด/ปิดการปรับขนาดตามธรรมชาติเพื่อดูว่าการปรับขนาดภายนอกช่วยให้คุณได้อะไรมากกว่า การควบคุมด้วยการปรับขนาดภายนอกและการกำหนดขนาดที่แท้จริงทำให้เนื้อหา หากต้องการดูเอฟเฟกต์ ให้เพิ่มข้อความ 2-3 ประโยคลงในการ์ด เมื่อองค์ประกอบนี้มีการปรับขนาดภายนอก ระบบจะจำกัดปริมาณเนื้อหาที่คุณ สามารถเพิ่มได้ก่อนที่จะเกินขีดจำกัด แต่จะไม่สามารถเพิ่มได้เมื่อขนาดที่แท้จริง เปิดอยู่

โดยค่าเริ่มต้น องค์ประกอบนี้มีการตั้งค่า width และ height จาก 400px แต่ละรายการ มิติข้อมูลเหล่านี้มีขอบเขตที่เข้มงวดกับทุกอย่างภายในองค์ประกอบ เหมาะสม เว้นแต่เนื้อหาจะใหญ่เกินกว่าในกล่อง คุณจะเห็นสิ่งนี้ได้จริง โดยเปลี่ยนคำบรรยายภาพใต้ภาพดอกไม้เป็นข้อความที่เกิน ความสูงของกล่อง

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

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

สิ่งสำคัญที่ต้องจำไว้คือการกำหนดขนาดที่แท้จริงเป็นค่าเริ่มต้นของเบราว์เซอร์ และมักจะมีความยืดหยุ่นมากกว่าการปรับขนาดภายนอก

พื้นที่ของโมเดลกล่อง

กล่องต่างๆ ประกอบด้วยพื้นที่ของโมเดลกล่องที่แตกต่างกันซึ่งล้วนมีหน้าที่เฉพาะ

วันที่ แผนภาพแสดงพื้นที่หลัก 4 ส่วนของโมเดลกล่อง ได้แก่ กล่องเนื้อหา ช่องระยะห่างจากขอบ กล่องเส้นขอบ และช่องขอบ
พื้นที่หลัก 4 ด้านของรูปแบบกล่องได้แก่ ช่องเนื้อหา ช่องระยะห่างจากขอบ กล่องเส้นขอบ และ ที่ขอบ

กล่องเนื้อหาคือพื้นที่ที่เนื้อหานั้นอยู่ เนื้อหาสามารถ ควบคุมขนาดของหน่วยระดับบนสุด ซึ่งมักจะเป็นพื้นที่ที่มีขนาดแปรผันมากที่สุด

ช่องระยะห่างจากขอบล้อมรอบกล่องเนื้อหาและเป็นพื้นที่ว่างที่สร้างขึ้นโดย พร็อพเพอร์ตี้ padding เนื่องจากระยะห่างจากขอบอยู่ภายในกล่อง พื้นหลังของกล่องจึงมองเห็นได้ในพื้นที่ ที่คิดขึ้นมา หากช่องดังกล่าวตั้งค่ากฎเพิ่มเติมไว้ เช่น overflow: auto หรือ overflow: scroll แถบเลื่อนจะใช้พื้นที่นี้ด้วย

แถบเลื่อนจะอยู่ในกล่องระยะห่างจากขอบ

กล่องเส้นขอบล้อมรอบกล่องระยะห่างจากขอบ และพื้นที่โดยรอบจะกำหนดโดยฟังก์ชัน border ซึ่ง จะสร้างเฟรมภาพสำหรับองค์ประกอบ ขอบขององค์ประกอบคือ จำกัดสิ่งที่คุณสามารถดูได้

พื้นที่สุดท้ายหรือช่องขอบ คือพื้นที่รอบๆ กล่องของคุณ ซึ่งกำหนดโดย กฎ margin ของช่อง พร็อพเพอร์ตี้ เช่น outline และ box-shadow ใช้พื้นที่ตรงนี้ด้วย เนื่องจากวาดไว้ที่ด้านบนขององค์ประกอบและไม่ มีผลต่อขนาดของกล่อง กำลังเปิด outline-width จาก 200px ของช่อง กล่องไม่ได้เปลี่ยนแปลงสิ่งใดภายในขอบเส้นขอบ

โครงร่างกว้างไม่มีผลต่อขนาดส่วนอื่นๆ ขององค์ประกอบ

การอุปมาอุปไมยที่มีประโยชน์

โมเดลกล่องเข้าใจยาก ดังนั้นนี่คือการอุปมาอุปไมยที่คุณ ที่ได้เรียนรู้มาจนถึงขณะนี้

วันที่ กรอบรูป 3 กรอบ
โมเดลกล่องแสดงโดยใช้กรอบรูปจริง

ในแผนภาพนี้ คุณมีกรอบรูป 3 กรอบอยู่ข้างกันใน หน้าจอ องค์ประกอบของรูปภาพที่อยู่ในเฟรมสอดคล้องกับโมเดลกล่องดังนี้

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

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

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

โปรดลองดำเนินการต่อไปนี้ในเบราว์เซอร์ของคุณเอง

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

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

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

ทุกเบราว์เซอร์จะใช้สไตล์ชีต 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 จะกว้างแค่ไหน

200 พิกเซล
260 พิกเซล

ความกว้างที่แท้จริงของกล่องนี้คือ 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 ที่กำลังใช้ภายใน

เปรียบเทียบผลของการปรับขนาด Content-box และ Border-box
*,
*::before,
*::after {
  box-sizing: border-box;
}

กฎ CSS นี้เลือกทุกองค์ประกอบในเอกสาร และองค์ประกอบเทียม ::before และ ::after ทุกรายการและใช้ box-sizing: border-box ซึ่งหมายความว่าตอนนี้ทุกองค์ประกอบจะใช้โมเดลช่องทางเลือกนี้

เนื่องจากโมเดลกล่องตัวเลือกสามารถคาดการณ์ได้มากกว่า นักพัฒนาซอฟต์แวร์จึงมักเพิ่ม กฎนี้ในการรีเซ็ตและตัวปรับมาตรฐาน เช่นข้อนี้

แหล่งข้อมูล

สไตล์ชีต User Agent