HTML/CSS (third entry for beginners)

First, the learning experience---reference excellent Web pages to learn.

1 Do we only do static Web pages primarily using the technology? Html+css as long as the online see, his source code is public.
"1", first analysis, how their pages are laid out (structured)
"2", try to do it again,---the imitation process.
"3", finally we can try our own innovation---the process of leading to the master.

CSS Wizard tricks, optimize the number of HTTP requests for Web pages, improve the efficiency of the page.
The core idea of the CSS Wizard is to combine multiple images into a single image, and then navigate through the background properties to control which parts of the image are displayed.
If the page can be selected in the picture, it must be inserted in the picture, choose not, is the background image
"CSS3 font icons are used instead of traditional small icons (future trends)"

Second, the way of CSS layout:
1, by default, is in the order of the document flow. In the structure order of the HTML.
2. Floating mode
3. Positioning method

Third, floating
Floating is the dominant property of the block element, the exclusive one-line behavior is canceled, allowing others and his line.
Floating is actually the block from the original document flow pattern separated out, the object behind him as it does not exist.
A common layout effect, such as a row-by-side style, is to display several block elements in a row.

CSS divides page elements into two categories, one of which is an inline element.
Body,div,p,h1,ul and Li are block elements by default. To make them appear in a row, you need to use a float.

When we are making, you use a different browser to see your results, so you know the difference between the various views.
It concludes that when the height of the child elements in the IE6 parent element exceeds the height of the parent element, IE6 automatically increases the height of the parent element by default.
If you want multiple blocks to appear on the same line, you can say that the blocks are set to float and float in the same direction.
Floating, floating, moving, floating objects will first float up, leaving the original position. The back move is the object behind it. will move up to its original position.

Clear float: It is possible to remove the effect of the previous object's float on the object behind.
Why the original two blocks in a row will change the original position because of the size of the browser window. (You can add another box to wrap them up)
When you set a block to be centered horizontally, a width value is set for the block.
When the parent element does not specify a height, and its child elements are floating, the height of the parent element does not automatically increase.
1, the first method: Add an empty tag, is no content of the label. will add code.
2, the second method: to the parent element, add Overflow:hidden
3, the use of pseudo-object after method.
The most popular clear floating code on the Web:
. clearfix:after{
Clear:both;
Display:block;
Visibility:hidden;
height:0;
line-height:0;
Content: ".";
}
Positioning the layout is where the element's position can be controlled through the position property of the element.
When we want to use absolute layout, we have to have two conditions
"1", the parent element must be added to the positioning properties, generally recommended to use position:relative;
"2", adding pairs of position:absolute to the child elements, plus directional attributes.

Relative positioning and absolute positioning.
Absolute positioning is when the parent element is positioned as a datum point---out of the document flow. (Note that child elements do not inherit the width of the parent element after leaving the document stream)
Relative positioning is based on itself as a datum point, positioning---leave the original position, but also occupy the original space.

HTML/CSS (third entry for beginners)