CSS Design Patterns Chapter 3 – 5

I covered almost three chapters today. Topics discussed were selectors and the CSS box model. As I don’t use a lot of the fancy selectors because it’s not supported by IE6, I skimmed over it. The box model material is pretty useful though; I really just have a general idea of how it works so it’s good to read about it in a more detailed manner. Now I won’t be caught unaware when I try a combination of attributes to style a box. Conversely, if I wished to style a box in a certain way, I now have the knowledge of how to do it.

• Block items follow a vertical flow.
• Inline items follow a horizontal flow and wrap to a new line when it doesn’t fit completely.
• You can’t set the width, height, and overflow of inline elements. It depends on the font.
• Tables are special because their width refers to the outside of the border, unlike everything else which specifies the inner box.
• Tables don’t have padding, but cells do. Cells don’t have margins, but tables do.
• Absolute items don’t affect the flow but are rendered in a different layer.
• Floated items affect the flow of other boxes.
• The float attribute specifies the horizontal position, but the vertical position is determined by its current inline position.
• Certain items can be sized (set size), shrinkwrapped (fit to content), or stretched (fit to parent)
• You cannot horizontally shrinkwrap a block box, it will always be stretched by default (or sized if set)

The box model, I believe, is something that every aspiring CSS guru needs to master.

February 25, 2010. Tags: css. Notes.