Html/Css (Article 3 for beginners) and css beginners

Html/Css (Article 3 for beginners) and css beginners

I. Learning Experience-refer to excellent web pages for learning.

1 what are the main technologies used for static Web pages? The source code of html + css is public as long as it is visible on the Internet.
[1] First, analyze how their pages are laid out (structured)
[2]. Try again. --- simulate the process.
[3]. Finally, we can try our own innovation-the process of leading to a master.

Css genie helps optimize the number of http requests on a webpage and improve the webpage efficiency.
* *** The core idea of the css genie is to combine multiple images into one image, and then control which parts of the image are displayed by positioning in the background attribute.
* ***** If the picture can be selected on the webpage, it must be the inserted image. If no picture is selected, it is the background image.
[Commonly used font icons in css3 to replace traditional small icons (future trends )]

Ii. css layout:
1. The default value is the order of document streams. In the html structure order.
2. Floating Mode
3. Positioning Method

3. Floating
Float cancels the overbearing attribute of a block element and excludes a single row. This allows others to join a row.
The floating block is actually separated from the original document stream mode, and the object next to it does not exist.
Common layout effects, such as the Union of rows, are to display several block elements in a row.

Css divides webpage elements into two types: one is block and the other is inline element.
Body, div, p, h1, ul, and li are block elements by default. Floating is required to display them in a row.

When we create a browser, you can use different browsers to view your results, so that you can know the differences between browsing.
* *** Concluded that when the height of the child element in the parent element of IE6 exceeds the height of the parent element, IE6 will automatically increase the height of the parent element by default.
* ***** If you want to display multiple blocks in the same row, you can set these blocks to float and the floating direction is the same.
* *** Floating: float first, float first, and then move. The floating object first floats and leaves the original position. The animation is the object behind it. It will be moved to its original location.

4. Clear floating: removes the influence of floating of the previous object on the subsequent object.
Why did the two blocks in a row change the size of the browser window. (You can add another box to wrap them up)
* ***** When a block is set to a horizontal residence, a width value is set for this block.
* ***** When the height of the parent element is not specified and its child element is floating, the height of the parent element will not automatically increase.
1. Method 1: add an empty tag, that is, a tag without content. Code is added.
2. Method 2: 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 allows you to control the position of an element through the position attribute of the element.
* ***** When we want to use absolute layout, we must have two conditions.
[1]. The positioning attribute must be added to the parent element. position: relative is generally recommended;
[2]. Add the position: absolute to the child element, and add the direction attribute.

* ***** Relative and absolute positioning.
Absolute positioning is the positioning of the parent element as the reference point-it will be out of the document flow. (Note that the child element does not inherit the width of the parent element after the child element leaves the Document Stream)
Relative positioning is based on itself as the benchmark to locate --- Leave the original location, but still occupies the original space.