HTML+CSS Basic Knowledge points

The following is their usual accumulation of learning, more miscellaneous, welcome to correct and supplement

One, CSS reset (CSS reset)

This is my simple collation, not all, we can continue to supplement according to their needs:

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 *{margin:0;padding:0;} is because: Div does not have internal and external margins, p only the margin problem does not have an internal margin problem, and so on, the performance problem is not good, you can write their own tags through such as Firefox F12 to see the internal and external margin of the element.

Second, full screen mask

Page document structure is:body

Three, inline and block elements

Inline elements: The content is open width, does not support wide height, does not support margin and padding margin, left and right support, code wrapping is resolved to a space (that is, not next to the next row in the display, but each row shows a kind of situation) this is resolved to a space size gap, is half the size of the text in the page, for example, if the body is set to Font-size to 12px, the gap is 6 pixels
Block attribute tag: When there is no width, the default is full of a row, support wide height, support all CSS commands
IMG is neither inline nor block, but Inline-block inline block element
Inline-block Features: Content open width When there is no width
IE6, IE7 does not support Inline-block for block attribute labels (solution: Floating)

Four: Cursor Properties

Cursor:url (xxx.cur), pointer; it can be jpg, GIF, PNG, etc., but there may be compatibility issues, preferably with. cur format, pointer meaning if the previous picture out of the question, then use pointer, equivalent to a spare

V. Floating
1, do not set the width of the case or open the width of the content

2, set to floating, then out of the document flow

Vi. positioning

Positioning:
1, absolute positioning and floating, so that the element out of the document flow, if not set width, so that the Block property label content open width;
2, the absolute positioning allows the embedded elements to support the width of high;
3, the positioning element default is higher than the former hierarchy (stacking level, but always less than 1), if you want to change the use of Z-index
4, fixed positioning does not set the width, you can let the block element content open width, and absolute positioning basically consistent, the difference is always relative to the entire document positioning, IE6 does not support fixed positioning, can be solved by JS together
5. Under IE6, the parent's overflow:hidden is not wrapped to a child of position:relative (this is the case when the child element height is higher than the parent element, in general, set to relative is not affected by the element itself), The solution to this problem is to give the parent a positional attribute (relative or absolute).
6, under IE6, if the position element's parent's width is odd, then the right and bottom of the positioned element have 1 pixel deviation, and no better solution is found, then avoid the parent element width is odd

Seven, clear floating

1, to the parent also added floating, but the parent also want to do with the parent level? A layer of add? Extensibility is not good, will cause: all elements of the page is floating, margin left and right automatically expire (floats bad!) ), conclusion: Not applicable, give up!!
2, to the floating elements of the parent plus display:inline-block, conclusion: not good, margin:0 auto failure!

3, to the floating element after adding an empty div,height:0px, but in IE6 under a minimum height of 19px, but not all elements have the smallest element, in order to solve this problem, add a font-size:0, but also can not solve the IE6 still left 2px problem, (The style is: Add an empty div,class to clear, the style is: clear:both;font-size:0;height:0;) Solution please listen to tell

4, to the floating element after adding <br clear= "All"/&gt, this property also has left, right equivalence, BR is no height, the clear property in the BR with the Clear:both effect is the same, in the IE6/7 all work is also easy, It is possible to use the scheme, but, however, does not conform to the standard: structure, style, behavior separation (wrote a BR tag, changed structure)
5, after pseudo-class does not change the structure of the document, content: "Contents" will not change the structure (through the F12 can be seen, the document structure of the "content" of the word does not exist, but can be displayed on the page, can see), such as style: p:after{ Content: "Contents", background:red;width:10px;height:10px;} Then the background color to red will only be "content", that is, the contents of things, p inside the text background color will not change, and width and height is also the content of things to work, will not affect the P element, but in IE6/7 only support a tag of the 4 pseudo-class, After pseudo-class is not supported, but it doesn't matter, because the parent of the floating element under IE6/7 does not have to float, that does not support after pseudo-class also does not matter, why the parent has the width does not need to clear floats? This is because there is a haslayout in IE (do not know Baidu Encyclopedia) default to False, with the width can be triggered to true (which can trigger to Baidu), Haslayout will be based on the size of the element content or the size of the parent to recalculate the height of the element, So what if the parent doesn't give width? This time with zoom:1 (Baidu Encyclopedia refers to the zoom in addition to normal value can inspire haslayout to true), Zoom zoom, zoom, and so generally use: to the floating element of the parent. Clear{zoom:1};. Clear:after{conetent: "";d Isplay:block;clear:both;} (The former to solve the IE6/7 under the clear float, the latter to solve the other browser under the clear float), is now respected this method of clear floating, recommended, recommended!!
6, overflow can contain floating elements, so overflow can create a clear floating illusion, is added to the floating element of the parent, this method is also available, but there is a problem in the IE6: because overflow does not raise the element level of the function, then with zoom:1 use, Haslayout can be fired, this method is still less, may hide what should have been shown, recommend the 5th method.

Note: Clear this property can only be added to the block element, for inline is not working!!

HTML+CSS Basic Knowledge points