Study Tips

1. 100% width divs not spanning entire width of the browser in webkit. Even Body can not span the entire width of the  browser. 
So crazy.
There is a funny way to fix it: 
html { overflow-y: scroll; }

2.  When Div is 100% width, set padding: 20px. Then its actual width is bigger than 100%. Be careful!!!!

3. Book review:

>1. Margin collapsing

Margin collapsing only happens with the vertical margins of block boxes in the normal flow of the 

document. Margins between inline boxes, floated, or absolutely positioned boxes never collapse. 

 

>2. Inline boxes

Inline boxes are laid out in a line horizontally. Their horizontal spacing can be adjusted using 

horizontal padding, borders, and margins (see Figure 3-9). However, vertical padding, borders, 

and margins will have no effect on the height of an inline box. Similarly, setting an explicit height 

or width on an inline box will have no effect either. The horizontal box formed by a line is called a 

line box, and a line box will always be tall enough for all the line boxes it contains. There is 

another caveat, though—setting the line height can increase the height of this box. Because of 

these reasons, the only way you can alter the dimensions of an inline box is by changing the line 

height or horizontal borders, padding, or margins. 

 

>3. display: inline-block

Helpfully, CSS2.1 allows you to set the display property of an element to be inline-block. As 

the name suggests, this declaration makes the element line up horizontally as if it were an inline 

element. However, the contents  of the box behave as though the box were a block-level, 

including being able to explicitly set widths, heights, vertical margins, and padding. Historically, 

this property has been poorly supported; hence, it’s relative obscurity. Thankfully, inline-block is 

now supported by Firefox 3.0 and above, IE 8, and  the latest versions of Safari and Opera, so I 

think we are going to see inline-block being used to create more interesting layouts over the 

next few years.  

 

position: static, relative, absolute, fixed

>4. position: relative and absolute

The main problem people have with positioning is remembering which type of 

positioning is which. Relative positioning is “relative” to the element’s initial 

position in the flow of the document, whereas absolute positioning is “relative” 

to nearest positioned ancestor or, if one doesn’t exist, the initial container block.

 

>5. float

Because floated boxes aren’t in the normal flow of the document, block boxes in the regular flow 

of the document behave as if the floated box wasn’t there.