Home > เริ่มต้นกับ CSS > พื้นฐาน กับ CSS Box Model

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

ในหน้าเว็บเพจนั้น แต่ละส่วน มองกันอย่างง่ายๆมันก็คือ กล่องแต่ละกล่อง วางต่อๆกัน เป็นการวาง 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 จากกล่องด้านใน แน่นอนว่าค่าความสูงของกล่องด้านนอกจะเพิ่มขึ้น แต่เรามักจะไม่กำหนดความสูงให้กล่องอยู่แล้ว เพราะเป็นส่วนที่ยืดได้ ตามแต่เนื้อหา จะได้โค้ดดังนี้

<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;}

Related Articles


Share
Categories: เริ่มต้นกับ CSS
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. likhi1
    April 18th, 2007 at 03:21 | #1

    ปล. 2 ผมลองใช้ CSS input select button กับ FX
    ในการปรับแต่งสีเส้นของ Object ภายในฟอร์มทั้งหมด ปรากฎว่าแสดงผลออกมาดีครับ
    แต่ใน IE กลับไม่ได้เรื่่องครับ……????

  2. likhi1
    April 18th, 2007 at 03:25 | #2

    ค่า textarea ด้วยครับอีกอันหนึ่ง………

    :d:d:d:d

  3. admin
    April 18th, 2007 at 16:00 | #3

    1. เอา position:relative ใน .box ออกครับ
    2. ใน ie มันแสดงผล ลิ้งค์ใน แท็ก h แบบนั้นเองครับ ถ้าจะเอาเส้นออกก็ใส่ a{text-decoration:none} อีกบรรทัดนึง

    ส่วนในแบบฟอร์ม ถ้าคุณกำหนด ที่ input เลย มันก็จะไปหมดเลยครับ ทั้ง radio button ทั้ง ปุ่ม submit ด้วย เพราะมันก็ขึ้นต้นด้วยคำว่า input เหมือนกัน ทางที่ดีสร้างเป็น class ดีกว่าครับ แล้วค่อยเอาไปใส่ เป็น input class=”" แบบนี้ครับ

    ส่วนเรื่องฟอร์มผมนึกภาพไม่ออกครับ ต้องดูเป็น case by case ไปนะครับ

  4. likhi1
    April 18th, 2007 at 19:23 | #4

    ขอบคุณมากครับที่ ช่วยดูให้ผม…เดี๋ยวผมจะไปแก้ไขดูครับ
    :)

  5. test
    April 21st, 2007 at 01:51 | #5

    test

  6. March 26th, 2008 at 04:04 | #6

    อยากให้ เรียงลำดับ div เป็นตัวอย่างให้ผมหน่อยได้มั๊ยครับ ผมจับต้นชนปลายไม่ถูกครับ

    ดังรูปนี้ครับ

  7. March 26th, 2008 at 10:47 | #7

    เรียงจากบนลงล่าง ซ้ายไปขวา (หรือขวาไปซ้ายก็ได้ แล้วแต่จะกำหนด) ครับ

  8. เก่ง
    March 28th, 2009 at 16:00 | #8

    เยี่ยมครับ:d

  9. yayie
    May 24th, 2009 at 02:57 | #9

    ทบความดีมากเลยค่ัะ กำลังสนใจ แต่ยังเริ่มไมู่ถูกเลยค่ะ

  10. August 30th, 2009 at 23:21 | #10

    ขอบคุณมากครับ :)

  11. ping
    October 28th, 2009 at 16:48 | #11

    ขอบคุณมากคร่า เขียนไว้นานแล้ว แต่ก็ยังมีประโยชน์มากๆ ค่ะ

    อิอิ

  12. December 5th, 2009 at 21:40 | #12

    Thank you for good information

  13. December 5th, 2009 at 21:42 | #13

    แนวนี้ชอบมากเลยครับ

  14. March 23rd, 2010 at 18:17 | #14

    The best information but i like

  15. April 6th, 2010 at 17:19 | #15

    อยากทำได้มั่ง

  16. August 24th, 2010 at 23:00 | #16

    ขอบคุณมากครับ แต่เรื่อง CSS นี่ผมยังต้องหัดอีกนานเลย มันเป็นอะไรที่ยากกว่าการใช้ HTML ปกติมากเลย

  17. February 1st, 2011 at 13:21 | #17

    ปัญหามันไม่ได้จบแค่นั้นดิครับ สมมุตผมทำ Box ขึ้นมา ขนาด 200px*200px
    จัด left ไว้ที่ 300px ขนาดของการ Fix DPI หน้าจอแย่ที่ 800px*600px
    แต่ถ้าหากเอาไปเปิดกับเครื่องอีกเครื่องที่มีการ Fix DPI หน้าจอ อยู่ที่ 1024px-768px
    เราจะตั้งค่าอย่างใรให้ Box ที่สร้างขึ้นอยู่ยังตำแหน่งเดิม เพราะถ้าระบุเหมือนเดิม 300px มันก็จะใช้ได้กับอีกเครื่องที่ Set ไว้ที่ 800*600px แต่หากทำไปเปิดกับ เครื่องที่ set ไว้ 1024-768px มันก็จะชิดขอบออกมา 300px ซึ่งตำแหน่งการแสดงบน web มันจะต้องผิดเพียนไปแน่นอน

    อยากได้คำแนพนำหน่อยครับ
    ผมลงปรับเป็น % แล้วก็ไม่เท่ากัน

  18. February 1st, 2011 at 14:11 | #18

    @นายช่างบลู
    โดยปกติแล้วเราจะเขียน Div ครอบคลุมภายนอกไว้ 1 อันครับ เป็นกล่องใหญ่สุด แล้วจึงจัดกล่องเล็กอยู่ภายในครับ ถ้าดูจากหน้าเว็บนี้ จะเห็นส่วนสีขาวและด้านนอกเป็นสีเทา จัดตำแหน่งให้อยู่กึ่งกลาง ที้นี้คุณจะจัดกล่องเล็กให้ห่างเท่าไรยังไงมันก็จะอยู่ตำแหน่งเดิม

    ส่วนเรื่องของหน้าจอแต่ละขนาดคุณต้องเลือกว่า จะทำให้พอเหมาะกับขนาดหน้าจอเท่าไร ถ้าคุณเลือก 800px*600px ดูได้ Div ตัวนอกสุดก็ควรเซ็ตความกว้างไว้ 780px คนหน้าจอ 1024 ก็ดูได้แต่จะเห็นหน้าเว็บเล็กลงหน่อย

    ส่วนผมทิ้ง 800×600 กับ 1024×768 ไปแล้ว ผมกำหนดความกว้างตัวนอกไว้ที่ 1100 ต้องคนหน้าจอ 1280 ขึ้นไปจึงจะดูได้ปกติสุข ถ้าเล็กกว่านี้ก็ต้องเลื่อน scroll bar ด้านล่างเอา

    หรือถ้าคุณอยากซับพอร์ททุกขนาดหน้าจอ ก็ให้กำหนดทุกอย่างเป็น % ครับ

  1. No trackbacks yet.