กฎของ css box medel:
- block เป็นรูปสี่เหลี่ยม ทุก element สามารถเป็น block
- ขนาดและตำแหน่งของ block คำนวณได้จาก width,height,padding,borders และ margins
- ถ้าไม่ได้ระบุความสูง block element จะสูงเท่ากับ content ภายในของมันบวกกับ padding ยกเว้นแต่ content ของมัน float
- ถ้าไม่ได้ระบุความกว้าง, กล่องที่ไม่ float จะขยายความกว้างเท่ากับความกว้างลบด้วย padding ของกล่องที่ครอบมันอยู่ชั้นแรก
สิ่งที่ควรจำให้ขึ้นใจเกี่ยวกับการทำงานกับ element ในรูปแบบ block
- ถ้า box มีขนาด width เท่ากับ 100% มันไม่ควรจะมี margin,padding หรือ borders ไม่ง้นมันจะเกินขนาดกล่องที่ครอบตัวมัน
- margin ในแนวตั้งสามารถจะทำให้เกิดปัญหาเกี่ยวกับขนาดถูกหุบลงซึ่งทำให้เกิดปัญหากับโครงสร้างของเว็บไซท์
- position แบบ relative แล absolute จะมีพฤติกรรมต่างกันขึ้นอยู่กับสภาพแวดล้อมรอบๆ
- กฎและหลักการนี้จะถูกต้องเมื่อหน้าซึ่งแสดง block อยู่ในรูปแบบมาตรฐาน
http://www.blogger.com/img/blank.gif
เพิ่มเติม
- float block จะไม่สามารถใช้ vertical-align อย่างเช่น middle
reference
http://www.nicollet.net/2010/02/reusable-css/ http://www.contentwithstyle.co.uk/content/modular-css/
http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html
http://code.google.com/p/ie7-js/
the-principles-of-cross-browser-css-coding/
http://reference.sitepoint.com/css/collapsingmargins
15-techniques-and-tools-for-cross-browser-css-coding
http://www.noupe.com/design/101-css-techniques-of-all-time-part-1.html
http://www.nicollet.net/2010/02/reusable-css/
http://cssdesignpatterns.com/
http://www.alanayoub.com/modular-css/
http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
http://onwebdev.blogspot.com/2011/01/css-design-patterns.html
http://net.tutsplus.com/tutorials/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/
http://coding.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/
http://net.tutsplus.com/tutorials/html-css-techniques/10-principles-of-the-css-masters/
http://lesscss.org/
http://www.devwebpro.com/9-top-css-essential-skills-that-every-web-designer-should-learn/
http://www.tripwiremagazine.com/2009/06/7-new-essential-css-3-techniques-revealed.html
http://www.webdesignerdepot.com/2009/05/10-best-css-practices-to-improve-your-code/
http://www.evotech.net/blog/2007/04/css-best-practices/
http://coding.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/
http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level/
http://sixrevisions.com/css/12-common-css-mistakes-web-developers-make/
http://www.learn-css-tutorial.com/CSS-Best-Practices.cfm
http://meyerweb.com/eric/tools/css/reset/
โปรแกรมช่วยเขียน CSS : Rapid CSS Editor
