Basic html and css knowledge

Basic html and css knowledge

The following are my daily learning experience, which is complicated. You are welcome to correct and supplement it.

I. css reset)

This is a simple arrangement, not all. You can continue to add as needed:

Body, p, h1, h2, h3, h4, h5, h6, dl, dd {margin: 0; font-size: 12px ;}
Ol, ul {margin: 0; padding: 0; list-style: none ;}
A {text-decoration: none ;}
Img {border: none ;}

Do not use * {margin: 0; padding: 0;} Because: div has no internal and external margins, p has only the outer margins, and no internal margins, and so on. performance problems are also poor, you can write tags by yourself, such as the F12 of Firefox, to view the internal and external margins of elements.

Ii. Full Screen mask

The structure of the page document is: body

3. embedded and block elements

Embedded element: the content is open in width. The width and height are not supported, the upper and lower margins of margin and padding are not supported, and the left and right sides are supported, the line feed of the Code is parsed as a space (that is, it is not immediately displayed in a row, but is displayed in one condition in each line). This is the gap in the size of the space to be parsed, is half the text size in the page. For example, if the font-size is set to 12px in the body, the gap is 6 pixels.
Block attribute labels: when no width is available, a row is full by default. The width and height are supported, and all css commands are supported.
Img is neither inline nor block, but an inline-block inline block element.
The inline-block feature has the following features: when there is no width, the content is opened.
Ie6 and ie7 do not support the inline-block of block attribute tags (solution: Floating)

Iv. cursor attributes

Cursor: url (xxx. cur), pointer; meaning: jpg, gif, png, etc., but there may be compatibility issues, it is best to use. in the cur format, pointer indicates that if there is a problem with the above picture, pointer is used, which is equivalent to a backup.

5. Floating
1. If the width is not set, the width is still extended by the content.

2. If it is set to floating, it is out of the Document Stream.

Vi. Positioning

Positioning:
1. Absolute positioning is the same as floating, which disconnects the element from the document stream. If the width is not set, the width of the block attribute TAG content is extended;
2. Absolute positioning allows embedded elements to support width and height;
3. The default value of the positioning element is higher than that of the former (stacked level, but never less than 1). To change the value, use z-index.
4. If fixed positioning does not set the width, the block element content can be opened to the width, which is basically the same as absolute positioning. The difference is that it is always located relative to the entire document. IE6 does not support fixed positioning, it can be solved through js together
5. In IE6, parent-level overflow: hidden does not support sub-level settings set to position: relative (this is when the child element height is higher than the parent element, in general, setting relative does not affect the element itself). To solve this problem, add the positioning attribute to the parent level (either relative or absolute positioning)
6. in IE6, if the parent width and height of the positioning element are odd, the right and bottom of the positioning element both have 1 pixel deviation, if a better solution is not found, the width and height of the parent element must be an odd number.

7. Clear floating

1. What should I do if the parent level is also floating? Layer by layer? Poor scalability, it will lead to: All elements on the page are floating, and the margin is automatically invalid (floats bad !), Conclusion: Not applicable. Give up !!
2. Add display: inline-block to the parent of the floating element. Conclusion: it is not good. margin: 0 auto is invalid!

3. Add an empty div, height: 0px to the floating element. However, IE6 has a minimum height of 19px, but not all elements have a minimum element. To solve this problem, add a font-size: 0;, but it cannot solve the problem of 2 PX remaining in IE6 (style: add an empty div, class is clear, style is: clear: both; font-size: 0; height: 0;) solution.

4. Add <br clear = "all"/> to the floating element. This attribute has the left and right values. The br has no height, the clear attribute in the br works the same way as the clear: both attribute. It works well in ie6/7 and can be used. However, does not comply with w3c standards: structure, style, and behavior separation (a br label is written and the structure is changed)
5. The after pseudo-class does not change the structure of the document. content: "content" does not change the structure (as shown in F12, the words "content" in the document structure do not exist, but can be displayed on the page and displayed.) For example, style: p: after {content: "content ", background: red; width: 10px; height: 10px;} if the background color turns red, it will only be "content", that is, the content, the background color of the text in p will not change, and the width and height will also work for the content and will not affect the p element, however, in IE6/7, only the four pseudo classes of the tag are supported. The after pseudo classes are not supported, but it doesn't matter, because the floating element in IE6/7 does not need to be flushed if its parent class has a width, it does not matter if it does not support the after pseudo class. Why does the parent class have a width and it does not need to be flushed? This is because there is a haslayout item in ie (Baidu encyclopedia if you don't know it). The default value is false. With width, it can be triggered to true (which triggers Baidu ), haslayout recalculates the element height based on the size of the element content or the size of the parent level. What if the parent level does not grant width? In this case, zoom: 1 is used (in Baidu encyclopedia, the value of zoom can be used to stimulate haslayout to true in addition to normal). zoom can be used to zoom in and out, so it is generally used as follows: the parent level of the floating element. clear {zoom: 1 };. clear: after {conetent: ""; display: block; clear: both;} (the former solves the clear floating in ie6/7, and the latter solves the clear floating in other browsers ), currently, this floating method is highly recommended and recommended !!
6. overflow can contain floating elements. Therefore, overflow can create a floating illusion, which is added to the parent level of the floating element. This method is also available, but there is a problem in IE6: because overflow does not improve the level of elements, using zoom: 1 can stimulate haslayout. This method is rarely used and may hide the content that should have been displayed, 5th methods are recommended.

Note: The clear attribute can only be added to block elements, and does not work for Embedded !!