เมื่อคุณจัดสไตล์เค้าโครงเว็บไซต์ที่ซับซ้อนทุกระดับด้วย CSS (นอกเหนือจากเค้าโครงบทความธรรมดา) สิ่งต่างๆ จะยุ่งเหยิงอย่างรวดเร็ว ซึ่งมักนำไปสู่ปัญหาการจัดวางต่างๆ
ปัญหาเค้าโครง CSS ที่พบบ่อยที่สุดคือ:
- องค์ประกอบที่ทับซ้อนกัน (มักเป็นปัญหาล้น)
- องค์ประกอบที่ยุบ (มักเป็นปัญหาขอบ)
- พื้นที่สีขาวพิเศษ (หลายสิ่งหลายอย่างอาจทำให้เกิดสิ่งนี้)
วิธีง่ายๆ ในการรับภาพทันทีเกี่ยวกับปัญหาเลย์เอาต์ของคุณคือการเพิ่มเส้นขอบรอบองค์ประกอบ HTML ทั้งหมดของคุณ โดยใช้ตัวเลือกสากลของ CSS \*
เพิ่มสิ่งนี้ที่ด้านบนของสไตล์ชีต CSS ของคุณ:
\* {
border: 1px solid red;
}ฉันทำบนเว็บไซต์ของตัวเองและรู้ได้ทันทีว่าเลย์เอาต์ของฉันอาจต้องมีการปรับเปลี่ยน
แม้ว่าเลย์เอาต์ของคุณจะไม่มีปัญหาด้านภาพก็ตาม เคล็ดลับเส้นขอบนี้สามารถช่วยให้เปิดเผยหรือชี้ให้เห็นถึงสิ่งที่อาจนำไปสู่ปัญหาตามมาได้
แก้ไข
สามารถทำได้ด้วย outline ทรัพย์สินแทนทรัพย์สินชายแดน อาจเป็นทางออกที่ดีกว่าเนื่องจากโครงร่างไม่ใช้พื้นที่
