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.

巴特西

Study Tips

最新文章

热门文章