พอดแคสต์ 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;
}
เนื้อหาจะมีความกว้าง 142px แทนที่จะเป็น 100px ที่คุณระบุ เนื้อหาจะแยกออกจากองค์ประกอบของคุณ ทำไมจึงเป็นเช่นนั้น
โมเดลกล่องเป็นพื้นฐานหลักของ 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 กรอบวางอยู่ติดกันบนผนัง องค์ประกอบของรูปภาพที่อยู่ในเฟรมจะสอดคล้องกับโมเดลกล่องดังต่อไปนี้
- กล่องเนื้อหาคืออาร์ตเวิร์ก
- กล่องระยะห่างจากขอบคือกระดานยึดสีขาวอยู่ระหว่างกรอบกับอาร์ตเวิร์ก
- กล่องเส้นขอบคือกรอบที่ให้เส้นขอบตามตัวอักษรสำหรับงานศิลปะ
- ช่องขอบคือช่องว่างระหว่างเฟรม
- เงาจะใช้พื้นที่เท่ากับกล่องระยะขอบ
แก้ไขข้อบกพร่องของโมเดล Box
เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงภาพการคำนวณโมเดล Box ที่เลือกขึ้นมา ซึ่งจะช่วยให้เข้าใจวิธีการทำงานของโมเดล Box และผลกระทบที่มีต่อเว็บไซต์ที่คุณกำลังจัดการอยู่
ให้ลองดำเนินการดังกล่าวในเบราว์เซอร์ของคุณเอง
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- เลือกองค์ประกอบ
- แสดงโปรแกรมแก้ไขข้อบกพร่องของโมเดล Box
ควบคุมโมเดลกล่อง
ในการทำความเข้าใจวิธีควบคุมโมเดลของช่อง คุณต้องเข้าใจสิ่งที่เกิดขึ้นในเบราว์เซอร์ก่อน
ทุกเบราว์เซอร์จะใช้สไตล์ชีต 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 จะกว้างแค่ไหน
200px จะถูกต้องหากช่องดังกล่าวมี box-sizing: border-box
ความกว้างจริงของกล่องนี้คือ 260 พิกเซล
เนื่องจาก CSS ใช้ box-sizing: content-box เริ่มต้น ความกว้างที่ใช้จะเป็นความกว้างของเนื้อหา และเพิ่ม padding และ border ทั้ง 2 ด้าน 200px สำหรับเนื้อหา + 40px ของ + เส้นขอบ 20px ทำให้เห็นความกว้างรวม 260px
คุณเปลี่ยนแปลงได้โดยระบุขนาด 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 ไปใช้
ซึ่งหมายความว่าทุกองค์ประกอบจะใช้โมเดลกล่องทางเลือกนี้
เนื่องจากโมเดลกล่องทางเลือกคาดการณ์ได้มากกว่า นักพัฒนาซอฟต์แวร์จึงมักเพิ่มกฎนี้ในการรีเซ็ตและการทำให้เป็นมาตรฐาน เช่น แบบนี้