Frontend Engineering, Volume II

CSS: Chapter 2 Companion—CSS Boxes

© 2013, Martin Rinehart


Select an example from the menu above.

Basic Box

Diagram of CSS Box Model

With Margins

Diagram of CSS Box Model

History

The original W3C Recommendation: http://www.w3.org/TR/REC-CSS1-961217.

The history of CSS, according to its creators, Lie and Box: http://www.w3.org/Style/LieBos2e/history/Overview.html.

History and rationale: http://www.daaq.net/old/css/index.php?page=css+history&parent=using+css.

The Box Model

A very popular CSS blog: http://css-tricks.com/the-css-box-model/.

A well-informed critic of the W3C model: http://quirksmode.org/css/user-interface/boxsizing.html.

Another opinion from another widely-read blogger: http://www.paulirish.com/2012/box-sizing-border-box-ftw/.

The IE "bug"—historical perspective: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug.

Giving the Box a Position

A good introduction: http://www.elated.com/articles/css-positioning/.

If you love details: http://www.w3.org/TR/CSS2/visudet.html.

Property Values

The present and future, from the master: http://www.w3.org/Style/Examples/007/units.en.html.

Width auto v. 100%: http://headertofooter.com/post/80699461723/the-difference-between-width-auto-and-width-100.


Feedback: MartinRinehart at gmail dot com

# # #