พื้นฐาน กับ 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 ด้วยครับอีกอันหนึ่ง………
:d:d:d:d
1. เอา position:relative ใน .box ออกครับ
2. ใน ie มันแสดงผล ลิ้งค์ใน แท็ก h แบบนั้นเองครับ ถ้าจะเอาเส้นออกก็ใส่ a{text-decoration:none} อีกบรรทัดนึง
ส่วนในแบบฟอร์ม ถ้าคุณกำหนด ที่ input เลย มันก็จะไปหมดเลยครับ ทั้ง radio button ทั้ง ปุ่ม submit ด้วย เพราะมันก็ขึ้นต้นด้วยคำว่า input เหมือนกัน ทางที่ดีสร้างเป็น class ดีกว่าครับ แล้วค่อยเอาไปใส่ เป็น input class=”" แบบนี้ครับ
ส่วนเรื่องฟอร์มผมนึกภาพไม่ออกครับ ต้องดูเป็น case by case ไปนะครับ
ขอบคุณมากครับที่ ช่วยดูให้ผม…เดี๋ยวผมจะไปแก้ไขดูครับ
:)
test
อยากให้ เรียงลำดับ div เป็นตัวอย่างให้ผมหน่อยได้มั๊ยครับ ผมจับต้นชนปลายไม่ถูกครับ
ดังรูปนี้ครับ
เรียงจากบนลงล่าง ซ้ายไปขวา (หรือขวาไปซ้ายก็ได้ แล้วแต่จะกำหนด) ครับ
เยี่ยมครับ:d
ทบความดีมากเลยค่ัะ กำลังสนใจ แต่ยังเริ่มไมู่ถูกเลยค่ะ
ขอบคุณมากครับ :)
ขอบคุณมากคร่า เขียนไว้นานแล้ว แต่ก็ยังมีประโยชน์มากๆ ค่ะ
อิอิ
Thank you for good information
แนวนี้ชอบมากเลยครับ
The best information but i like
อยากทำได้มั่ง
ขอบคุณมากครับ แต่เรื่อง CSS นี่ผมยังต้องหัดอีกนานเลย มันเป็นอะไรที่ยากกว่าการใช้ HTML ปกติมากเลย
ปัญหามันไม่ได้จบแค่นั้นดิครับ สมมุตผมทำ Box ขึ้นมา ขนาด 200px*200px
จัด left ไว้ที่ 300px ขนาดของการ Fix DPI หน้าจอแย่ที่ 800px*600px
แต่ถ้าหากเอาไปเปิดกับเครื่องอีกเครื่องที่มีการ Fix DPI หน้าจอ อยู่ที่ 1024px-768px
เราจะตั้งค่าอย่างใรให้ Box ที่สร้างขึ้นอยู่ยังตำแหน่งเดิม เพราะถ้าระบุเหมือนเดิม 300px มันก็จะใช้ได้กับอีกเครื่องที่ Set ไว้ที่ 800*600px แต่หากทำไปเปิดกับ เครื่องที่ set ไว้ 1024-768px มันก็จะชิดขอบออกมา 300px ซึ่งตำแหน่งการแสดงบน web มันจะต้องผิดเพียนไปแน่นอน
อยากได้คำแนพนำหน่อยครับ
ผมลงปรับเป็น % แล้วก็ไม่เท่ากัน
@นายช่างบลู
โดยปกติแล้วเราจะเขียน Div ครอบคลุมภายนอกไว้ 1 อันครับ เป็นกล่องใหญ่สุด แล้วจึงจัดกล่องเล็กอยู่ภายในครับ ถ้าดูจากหน้าเว็บนี้ จะเห็นส่วนสีขาวและด้านนอกเป็นสีเทา จัดตำแหน่งให้อยู่กึ่งกลาง ที้นี้คุณจะจัดกล่องเล็กให้ห่างเท่าไรยังไงมันก็จะอยู่ตำแหน่งเดิม
ส่วนเรื่องของหน้าจอแต่ละขนาดคุณต้องเลือกว่า จะทำให้พอเหมาะกับขนาดหน้าจอเท่าไร ถ้าคุณเลือก 800px*600px ดูได้ Div ตัวนอกสุดก็ควรเซ็ตความกว้างไว้ 780px คนหน้าจอ 1024 ก็ดูได้แต่จะเห็นหน้าเว็บเล็กลงหน่อย
ส่วนผมทิ้ง 800×600 กับ 1024×768 ไปแล้ว ผมกำหนดความกว้างตัวนอกไว้ที่ 1100 ต้องคนหน้าจอ 1280 ขึ้นไปจึงจะดูได้ปกติสุข ถ้าเล็กกว่านี้ก็ต้องเลื่อน scroll bar ด้านล่างเอา
หรือถ้าคุณอยากซับพอร์ททุกขนาดหน้าจอ ก็ให้กำหนดทุกอย่างเป็น % ครับ