พื้นฐาน กับ CSS Box Model

posted on 05 Dec 2007 23:39 by pommatt in CSS

พื้นฐาน กับ CSS Box Model

April 17, 2007 at 6:48 pm · Filed under เริ่มต้นกับ CSS

ในหน้าเว็บเพจนั้น แต่ละส่วน มองกันอย่างง่ายๆมันก็คือ กล่องแต่ละกล่อง วางต่อๆกัน เป็นการวาง layout พิ้นฐาน ซึ่งมีความสำคัญมาก เราจะมาดูกันว่า box แต่ละอัน มีส่วนประกอบอะไรบ้าง
: ภาพตัวอย่าง
box model

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 แสดงผลดังนี้
box_ie_nodoctype

ส่วน fx แสดงผลดังนี้
box_fx_nodoctype
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 แล้ว

box model

จากรูปนี้ ขอบเขตที่แท้จริง ของกล่อง จะเท่ากับ
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 แสดงผลถูกต้อง
box ie

ส่วน fx นั้น margin ด้านบน หายไป
box firefox

เมื่อกล่องซ้อนกัน fx มักทำ margin top หายไปเสมอ ถ้าเป็นเช่นนี้ เราลองเปลี่ยน โดยลบ margin:10px; ใน box1 ออก แล้วเพิ่ม padding:10px ใน box0 แทน แล้ว preview ดู จะเห็นว่า แสดงผลเหมือนกันแล้ว แต่เมื่อใช้ padding พื้นที่ สีดำ ก็จะถูกบวกเพิ่มเข้าไปอีก
box test
มันคงไม่ใช่เรื่องดีแน่ๆ หากคุณกำหนดความกว้างที่แน่นอนเอาไว้ layout อื่นๆก็จะถูกดันออกไปอีก 2 วิธีแก้ที่ง่ายๆก็คือ
1 ก็เอาค่า padding ซ้ายขวา ไปลบออกจากค่า width ก็จะได้ box ขนาดเท่าเดิม ในที่นี้คือต้องกำหนด witdth:80px;

2 เมื่อต้องการเว้นระยะบนล่างให้ใช้ padding จากกล่องด้านนอก ส่วนด้านซ้ายขวา ใช้ margin จากกล่องด้านใน แน่นอนว่าค่าความสูงของกล่องด้านนอกจะเพิ่มขึ้น แต่เรามักจะไม่กำหนดความสูงให้กล่องอยู่แล้ว เพราะเป็นส่วนที่ยืดได้ ตามแต่เนื้อหา จะได้โค้ดดังนี้

หวังว่าทุกคนคงจะเข้าใจ ในเรื่องของ margin padding และ box กันพอสมควรครับ ส่วนเรื่องการแสดงผลที่ไม่ตรงกันนั้น ยังมีวิธีแก้อีกหลายวิธี รวมไปถึง วิธี css hacks ด้วย จะนำมาเขียนในคราวต่อๆไปละกันนะครับ สุดท้าย ลองลบโค้ด บรรทัดนี้ดูนะครับ แล้วลอง preview ดุทั้ง fx ie ว่าจะเป็นอย่างไร ==>> body{margin:0;}

อ้างอิงจาก: www.divland.com

1 Comments