พื้นฐาน กับ CSS Box Model
Apr 17th
ในหน้าเว็บเพจนั้น แต่ละส่วน มองกันอย่างง่ายๆมันก็คือ กล่องแต่ละกล่อง วางต่อๆกัน เป็นการวาง layout พิ้นฐาน ซึ่งมีความสำคัญมาก เราจะมาดูกันว่า box แต่ละอัน มีส่วนประกอบอะไรบ้าง
: ภาพตัวอย่าง
content area 100×100 pixel
padding 10px คือ ส่วนที่เว้นเข้ามาจากเส้นขอบ
boder 10 px คือ เส้นขอบ
margin 10 px คือ ระยะห่างจากเส้นขอบออกไปด้านนอก
ทดสอบ Box model
ในที่นี้ ทดสอบเฉพาะเบราเซอร์ที่มีผู้ใช้มากที่สุด คือ ie6 และ fx2.0 ส่วน netscape นั้นมีการแสดงผลเหมือน firefox ส่วน opera บางอย่างก็เหมือน ie บางอย่างเหมือน fx 
โค้ด css
<style type=”text/css”>
body{margin:0;}
.box1{
width:100px;
height:100px;
background: #CEE7FF;
border:#93C9FF solid 3px;
margin:10px;
padding:10px;
}
</style>
โค้ด html
<div class=”box1″>css site divland.com</div>
-จากโค้ด เราต้องการได้กล่องขนาดกว้าง 100px สูง 100px
หากคุณยังไม่ได้ประกาศ Doctype จะเห็นว่า ie6 แสดงผลดังนี้
ส่วน fx แสดงผลดังนี้
ie6 จะมีการอ่านค่าแตกต่างจาก fx เมื่อเรากำหนดไว้ที่ 100 px ทั้ง 4 ด้าน ie6 จะลบค่า border และ padding เข้ามาด้านใน และยังคง ความกว้างสูง 100 px ไว้ทั้ง 4 ด้าน โดยจะเหลือ content area = 100 – border(6) -padding(20) =74px *** หักลบเข้ามาทั้ง ซ้ายขวา
ส่วน fx จะคง content area ไว้ 100px แล้วบวก border และ padding เพิ่มเข้าไป ดังนั้นความกว้างที่แท้จริง จะเท่ากับ 100+6+20=126px
เมื่อเบราเซอร์คิดไม่เหมือนกัน จึงต้องมีการประกาศ !Doctype เพื่อเป็นตัวกลางให้มีการแสดงผลเหมือนกัน
-เพิ่ม
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
เข้าไปที่บรรทัดแรกสุดของหน้า html ลอง previw ดูอีกครั้งจะเห็นว่า ie6 อ่านค่าเหมือน fx แล้ว
จากรูปนี้ ขอบเขตที่แท้จริง ของกล่อง จะเท่ากับ
100+border20+padding20 = 140px และมีระยะห่างซ้ายขวาบนล่าง (margin) อีก 10px
เมื่อกล่องซ้อนกล่อง
ในการทำงานจริง เราคงไม่ได้ใช้กล่องอันเดียวแน่ๆ จะต้องมีการซ้อนกัน เพื่อเว้นระยะ และจัดหน้า
จากโค้ดเดิม เราจะเพิ่มขึ้นมาอีก 1 กล่อง ดังนี้
.box0{
width:200px;
height:200px;
background:#666666;
margin:10px;
}
เพิ่ม html ดังนี้
<div class=”box0″>
<div class=”box1″>css site divland.com</div>
</div>
จะได้ผลลัพธ์ดังนี้
ie6 แสดงผลถูกต้อง
ส่วน fx นั้น margin ด้านบน หายไป
เมื่อกล่องซ้อนกัน fx มักทำ margin top หายไปเสมอ ถ้าเป็นเช่นนี้ เราลองเปลี่ยน โดยลบ margin:10px; ใน box1 ออก แล้วเพิ่ม padding:10px ใน box0 แทน แล้ว preview ดู จะเห็นว่า แสดงผลเหมือนกันแล้ว แต่เมื่อใช้ padding พื้นที่ สีดำ ก็จะถูกบวกเพิ่มเข้าไปอีก
มันคงไม่ใช่เรื่องดีแน่ๆ หากคุณกำหนดความกว้างที่แน่นอนเอาไว้ layout อื่นๆก็จะถูกดันออกไปอีก 2 วิธีแก้ที่ง่ายๆก็คือ
1 ก็เอาค่า padding ซ้ายขวา ไปลบออกจากค่า width ก็จะได้ box ขนาดเท่าเดิม ในที่นี้คือต้องกำหนด witdth:80px;
2 เมื่อต้องการเว้นระยะบนล่างให้ใช้ padding จากกล่องด้านนอก ส่วนด้านซ้ายขวา ใช้ margin จากกล่องด้านใน แน่นอนว่าค่าความสูงของกล่องด้านนอกจะเพิ่มขึ้น แต่เรามักจะไม่กำหนดความสูงให้กล่องอยู่แล้ว เพราะเป็นส่วนที่ยืดได้ ตามแต่เนื้อหา จะได้โค้ดดังนี้
<style type=”text/css”>
body{margin:0;}
.box0{
width:200px;
height:200px;
background:#666666;
margin:10px;
padding-top:10px;
}
.box1{
width:100px;
height:100px;
background: #CEE7FF;
border:#93C9FF solid 3px;
margin-left:10px;
padding:10px;
}
</style>
หวังว่าทุกคนคงจะเข้าใจ ในเรื่องของ margin padding และ box กันพอสมควรครับ ส่วนเรื่องการแสดงผลที่ไม่ตรงกันนั้น ยังมีวิธีแก้อีกหลายวิธี รวมไปถึง วิธี css hacks ด้วย จะนำมาเขียนในคราวต่อๆไปละกันนะครับ สุดท้าย ลองลบโค้ด บรรทัดนี้ดูนะครับ แล้วลอง preview ดุทั้ง fx ie ว่าจะเป็นอย่างไร ==>> body{margin:0;}
ปล. 2 ผมลองใช้ CSS input select button กับ FX
ในการปรับแต่งสีเส้นของ Object ภายในฟอร์มทั้งหมด ปรากฎว่าแสดงผลออกมาดีครับ
แต่ใน IE กลับไม่ได้เรื่่องครับ……????
ค่า textarea ด้วยครับอีกอันหนึ่ง………
1. เอา position:relative ใน .box ออกครับ
2. ใน ie มันแสดงผล ลิ้งค์ใน แท็ก h แบบนั้นเองครับ ถ้าจะเอาเส้นออกก็ใส่ a{text-decoration:none} อีกบรรทัดนึง
ส่วนในแบบฟอร์ม ถ้าคุณกำหนด ที่ input เลย มันก็จะไปหมดเลยครับ ทั้ง radio button ทั้ง ปุ่ม submit ด้วย เพราะมันก็ขึ้นต้นด้วยคำว่า input เหมือนกัน ทางที่ดีสร้างเป็น class ดีกว่าครับ แล้วค่อยเอาไปใส่ เป็น input class=”" แบบนี้ครับ
ส่วนเรื่องฟอร์มผมนึกภาพไม่ออกครับ ต้องดูเป็น case by case ไปนะครับ
ขอบคุณมากครับที่ ช่วยดูให้ผม…เดี๋ยวผมจะไปแก้ไขดูครับ
test
อยากให้ เรียงลำดับ div เป็นตัวอย่างให้ผมหน่อยได้มั๊ยครับ ผมจับต้นชนปลายไม่ถูกครับ
ดังรูปนี้ครับ
เรียงจากบนลงล่าง ซ้ายไปขวา (หรือขวาไปซ้ายก็ได้ แล้วแต่จะกำหนด) ครับ
เยี่ยมครับ
ทบความดีมากเลยค่ัะ กำลังสนใจ แต่ยังเริ่มไมู่ถูกเลยค่ะ
ขอบคุณมากครับ
ขอบคุณมากคร่า เขียนไว้นานแล้ว แต่ก็ยังมีประโยชน์มากๆ ค่ะ
อิอิ
Thank you for good information
แนวนี้ชอบมากเลยครับ
The best information but i like
อยากทำได้มั่ง