เค้าโครง CSS - ความกว้างและความกว้างสูงสุด
ใช้ความกว้าง ความกว้างสูงสุด และระยะขอบ: อัตโนมัติ;
ตามที่กล่าวไว้ในบทที่แล้ว องค์ประกอบระดับบล็อกจะใช้ความกว้างเต็มที่เสมอ (ขยายไปทางซ้ายและขวาให้มากที่สุด)
การตั้งค่าwidth
องค์ประกอบระดับบล็อกจะป้องกันไม่ให้ยื่นออกไปที่ขอบของภาชนะ จากนั้น คุณสามารถตั้งค่าระยะขอบเป็นอัตโนมัติ เพื่อจัดองค์ประกอบในแนวนอนให้อยู่ในแนวนอนในแนวนอน องค์ประกอบจะใช้ความกว้างที่ระบุ และพื้นที่ที่เหลือจะถูกแบ่งเท่า ๆ กันระหว่างระยะขอบทั้งสอง:
หมายเหตุ:ปัญหา<div>
ข้างต้นเกิดขึ้นเมื่อหน้าต่างเบราว์เซอร์มีขนาดเล็กกว่าความกว้างขององค์ประกอบ จากนั้นเบราว์เซอร์จะเพิ่มแถบเลื่อนแนวนอนไปที่หน้า
การใช้max-width
แทนในสถานการณ์นี้จะปรับปรุงการจัดการหน้าต่างขนาดเล็กของเบราว์เซอร์ นี่เป็นสิ่งสำคัญเมื่อทำให้ไซต์ใช้งานได้บนอุปกรณ์ขนาดเล็ก:
เคล็ดลับ:ปรับขนาดหน้าต่างเบราว์เซอร์ให้กว้างน้อยกว่า 500px เพื่อดูความแตกต่างระหว่าง div ทั้งสอง!
นี่คือตัวอย่างของสอง div ด้านบน:
ตัวอย่าง
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}