มาเรียน CSS กันเถอะ (แตกหน่อ)

[Rabbitinblack]

อะ มาดูกันต่อกับเรื่องของ overflow

ซึ่ง overflow ก็จะมี visible , hidden, scroll และ auto

ซึ่งค่า overflow ปรกติที่เราไม่ได้ตั้งค่าอะไรมัน จะเป็น visible

มาดูกันว่า แต่ละอันนั้น มีความแตกต่างกันยังไง

overflow : visible



จะเห็นว่า อะไรที่มันเกิน ก็จะโชว์ให้เราเห็น

overflow : hidden



มันจะซ่อนส่วนที่เกินจากที่เรากำหนดไว้

overflow : scroll



อันนี้จะใช้ในโอกาสที่เราต้องการโชว์ Scrollbar ทั้งสองด้าน แต่มันก็มีปัญหาตรงที่มันจะโชว์ตลอดเวลานี่ดิ

overflow : auto



อันนี้ถ้าเกินจากที่เรากำหนด ถึงจะมี Scrollbar เกิดขึ้น

เดี๋ยวมาต่อ ว่ามันใช้ประโยชน์ได้อะไร

credit : http://css-tricks.com/the-css-overflow-property/

[蓝月 (lán yuè)]

พี่บิ๊กสุดยอดดดด
แปะๆๆ กิ๊บกิ๊วววว

[iannnnn]

แตกหน่อแล้วครับ จู๋นี้เอาไว้เรียนกันออนไลน์กับจานบิ๊กเลย
(ส่วนจู๋นู้นก็ถามโน่นนี่กรุบกริบเหมือนเดิม)

[หนูอร]

อุกรี๊ด... +พี่บิ๊กเลย

[NooKSTYLE]

ติดตามๆ

[ณัฏฐ์]

ติดตามๆ

[☼ แอนมินิ ☼]

  แปะ

[บักรุ]

ลงเรียนด้วยคนครับ 

[กันย์]

จารย์บิ๊กสุดยอด

[Rabbitinblack]

ทำงานจนลืมมาต่อ

ต่อกันเลยแล้วกัน ว่า 1 ในประโยชน์ของ overflow ก็คือ



ถ้าเรามี div อันนึง แล้วใน div ก็มีอีกสอง div อยู่ด้านใน แต่ละ div ก็สั่ง float:left; ไว้

ปัญหาที่พบก็คือ สีของพื้นหลังตัว div ใหญ่ที่คลุมทั้งสอง div จะไม่ยาวลงมา



วิธีแก้บางคนก็จะใช้วิธี สร้าง div มาอีกตัวไว้ด้านล่างสุด แล้วสั่ง clear:both; ซึ่งก็จะทำให้ปัญหานี้หมดไป

แต่มีอีกวิธีนึง ที่ง่ายกว่า และไม่ต้องสร้าง div เพิ่ม ก็คือ การใช้คำสั่ง overflow:hidden;



เมื่อเราใส่ overflow:hidden; ให้กับตัว div ใหญ่ที่คลุมอยู่ ก็จะได้ผลเช่นเดียวกับวิธีข้างบน

//  มีกระจู๋สาระเป็นของตัวเองแล้ว

ใครมีอะไรสงสัย ก็ถามได้นะ ถ้าหามาตอบได้ จะหามาตอบให้นะครับ 

[Layiji]

มุงด้วย 

[iannnnn]

ขอพวกทิปจัดการ IE ด้วยแน

[เดอะบุ๋ม]

จารย์บิ๊กเจ๋งอ้ะ 

[Bellbells]

ว้ายๆๆ กรี้ดดๆๆ 

[Rabbitinblack]

กลับมากับเรื่องของ Margin collapsing

ซึ่งเป็นเรื่องเล็ก ๆ น้อย ๆ แต่พวกเราควรจะรู้

เริ่มจากดูรูปประกอบอันแรกก่อน



เมื่อเรามี div สองอัน โดยกำหนด margin ไว้ 20px ถ้าเราสั่ง float:left; clear:both; ไว้ใน div เราจะได้ตามแบบรูปนี่ละ

แต่ถ้าเราไม่ได้ใส่ไว้ละ ตามปรกติที่เคยบอกไว้ div มันจะเป็น display:block; อยู่แล้ว ดังนั้นมันจะขึ้นบรรทัดใหม่ จะได้ตามรูป



จะเห็นว่า ด้านล่างของ div บน กับด้านบนของ div ล่าง จะซ้อนกัน นี่ละ Margin collapsing

แล้วถ้าเกิดมัน margin ไม่เท่ากันละ จะเป็นยังไง ตามมาดูอันต่อไป



คราวนี้ div บนมี margin-bottom:30px; และ div ล่างมี margin-top:20px; ซึ่งตามจริงที่จะปรากฎจะเป็นดังนี้



จะเห็นว่า มันจะยึดหลักว่า margin ตัวไหนเยอะกว่า จะใช้อันนั้น

มาดูตัวอย่างสุดท้ายกันนะ ดูที่รูปประกอบเลย



กรณีนี้ ส่วนของเนื้อหา อยู่ภายใน div หรือเป็น div ใน div กรณีนี้จะได้ผลลัพธ์ยังไงลองคิดดูก่อน


















มันจะยึดหลัก margin ที่เยอะกว่าไว้ ซึ่งก็จะได้ผลดังรูปครับ