>> จินตนาการว่าเรามีของอยู่สามชิ้น ได้แก่ ข้อความ กล่องข้อความ และปุ่มกด เราจะมีวิธีการจัดเลเอาท์มันอย่างไรให้
- ข้อความ อยู่ชิดซ้าย ห่างจากขอบด้านซ้าย 10px
- กล่องข้อความ อยู่ถัดจาก ข้อความ ห่างจากกัน 5px
- และปุ่มกด อยู่ด้านล่าง กล่องข้อความ ระยะเริ่มต้นเท่ากันโดยห่างจากัน 5px
>> แน่นอนเพื่อนๆสามารถเลือกวิธีการจัดการกับปัญหาข้างต้นด้วยตัวเลือกต่อไปนี้ เลือกได้มากกว่าหนึ่งอย่างครับ (ลองคิดและเลือกเลยนะ)
1) margin-left: 10px
2) margin-left: 5px
3) padding-left: 10px
4) padding-left: 5px
5) padding-top: 5px
6) ใช้ table tr และ td เป็น layout
>> เฉลย ไม่ว่าจะเลือกตัวเลือกใดก็ตามในข้อ 1) ถึงข้อ 6) โดยเฉพาะวิธีการจัดการของทั้งสามด้วย margin หรือ table ล้วนทำให้การแก้ไขเลเอาท์ลำบากในภายหลัง (เมื่อของมีมากกว่าสามชิ้น และ requirement จากลูกค้าไม่แน่นอน)
>> ครับก็อย่างที่ผมอยากเสนอ ตัวเอกของเรื่องในคราวนี้ก็คือ CSS เวอร์ชัน 3 ที่มีระบบ box-sizing มาให้ใช้ แล้วมันคืออะไร?
>> มันคือเรื่องที่ว่าด้วยการคำนวณขนาดของ content (ขนาดจริงๆของสิ่งของ) หรือจะให้มันคำนวณขนาดของ border ของ content นั้นแทน (box-sizing: border-box)
>> เอาล่ะ ตัวอย่างต่อจากนี้จะใช้แท็ก div แทนแท็ก table และเลิกใช้ margin ไปตลอดกาล (forever)
- รูปที่ 1 (ตัวเลขสีแดง) คือเป้าหมายที่เราอยากจะ design ให้ใกล้เคียงที่สุด โดยใช้หลักการ box-sizing
- รูปที่ 2 จากรูปแรกจะเห็นว่าเราสามารถแบ่งได้เป็นสิบช่อง
- รูปที่ 3 ใช้สิบช่องดังกล่าวกับเป้าหมาย
- รูปที่ 4 กำหนดแท็ก div ขึ้นมาทั้งสิ้นสิบเอ็ดตัว ตัวนอกสุดคือตัวบรรจุของอีกสิบตัวภายใน พร้อมกับเซตค่าสีพื้นหลังเป็น สีน้ำเงิน (เดี๋ยวจะเปลี่ยนให้เป็นสีใกล้เคียงกับเป้าหมาย) ขนาดความกว้าง 100%
- รูปที่ 5 เปลี่ยนสีพื้นหลังเฉยๆ (อันที่จริงมันซ้ำ แต่ขี้เกียจทำใหม่)
- รูปที่ 6 ใส่รายละเอียดบางตำแหน่งที่เป็นข้อความ
- รูปที่ 7 ใส่รายละเอียดของ content ที่ไม่ใช่ข้อความ เช่น กล่องข้อความและปุ่มกด
- รูปที่ 8 เอาตัวเอกมาช่วย นั่นก็คือ box-sizing: border-box ค่านี้ส่งผลให้การคำนวณความกว้างนั้นไปใช้ขนาดที่รวมกับ border แล้วเป็นหลัก ดังนั้น content จึงไม่มีทางล้นออกจาก container เด็ดขาดครับ
>> มีคำถามว่า แล้วจะจัดระยะทางซ้าย ด้านบน ทางขวาหรือด้านล่างของแต่ละ content อย่างไรล่ะ คำตอบก็คือ ใช้ padding ล้วนๆครับ โดยให้แท็ก div เป็นตัวควบคุม padding ผลักเปลี่ยนตำแหน่ง content ของตัวเองไปตามประสงค์ของ design นั่นเอง ย้ำ! จงลืม margin อันน่าปวดหัวนั่นไปซะ
- รูปที่ 9 เสร็จเรียบร้อย (จบตัวอย่าง)
>> อ้อ อ่านเพิ่มเติม
- http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
ไม่มีความคิดเห็น:
แสดงความคิดเห็น