Html/Css (Part 3 for Beginners)

1. Learning experience---refer to excellent web pages to learn.

1 What is the main technology used for the static web pages we only make? As long as you can see html css on the Internet, its source code is public.
【1】, first analyze how their page is laid out (structured)
【2】, then try to do it, --- imitate the process.
【3】. Finally, we can try innovation ourselves---the process of leading to masters.

css wizard skills, optimize the number of http requests for web pages and improve the efficiency of web pages.
The core idea of ​​*****css sprite is to combine multiple pictures into one picture, and then control which parts of the picture are displayed through the positioning in the background attribute.
*****If the image can be selected on the web page, it must be the inserted image. If it cannot be selected, it is the background image
[Font icons are commonly used in css3 to replace traditional small icons (future trend)]

2. CSS layout method:
1. The default is in the order of document flow. According to the structural order of html.
2. Floating method
3. Positioning method

3. Floating
Floating cancels the overbearing attribute of block elements and the behavior of occupying a row, allowing others to join him in the same row.
Floating actually means that this block is separated from the original document flow mode, and the objects behind it are treated as if it does not exist.
Commonly used layout effects, such as a row of parallel styles, display several block elements in one row.

CSS divides web page elements into two categories, one is block and the other is inline element.
body, div, p, h1, ul and li are block elements by default. If you want them to be displayed in one line, you need to use floats.

When we are producing, please use different browsers to view your results, so that you can know the differences between various browsers.
***** concluded that when the height of the child element in the IE6 parent element exceeds the height of the parent element, IE6 will automatically increase the height of the parent element by default.
****If you want multiple blocks to be displayed in the same line, you can set these blocks to float and float in the same direction.
****Float Float, float first and then move. The floating object will float first and leave its original position. The last move is the object behind it. It will move back to its original position.

4. Clear floats: You can remove the impact of the float of the previous object on the subsequent objects.
Why do the two blocks originally in one line change their original positions due to the change in the size of the browser window. (You can add an additional box to wrap them)
*****When setting a block to be horizontally centered, a width value will be set for the block.
*****When the parent element does not specify a height and its child elements are floated, the height of the parent element will not automatically increase.
1. The first method: add an empty tag, which is a tag with no content. Code will be added.
2. The second method: add overflow: hidden to the parent element
3. Use the pseudo-object after method.
The most popular clear floating code on the Internet:
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content: “.”;
}
****Positioning layout means that the position of the element can be controlled through the position attribute of the element.
****When we want to use absolute layout, we must have two conditions
【1】. We must add positioning attributes to the parent element. It is generally recommended to use position: relative;
【2 】, add position: absolute to the child element; at the same time, add the direction attribute.

****Relative positioning and absolute positioning.
Absolute positioning means that the parent element is positioned as a reference point---it will break away from the document flow. (Note that child elements will not inherit the width of the parent element after leaving the document flow)
Relative positioning is based on itself as the reference point, positioning --- leaving the original position, but still occupying the original space.