1. Floating height collapse
Cause: The height of the parent element is stretched by the quilt element, and when set floating, it is detached from the document stream, and the child element cannot prop up the parent element, resulting in a high collapse
Workaround
. Clearfix:before,.clearfix:after{content: "";d Isplay:table;clear:both;}
2. Brother-Son Linkage
Workaround 1:padding
Workaround 2:float (but conditional)
Workaround 3:position:absolute
Workaround 4:border
Solution 5:overflow:hidden;
3.position
Relative positioning: Relative an offset from the starting point of its own position
Absolute positioning: Absolute an inline element into a block element, to see if the parent element of the parent element has a set position, and if not, continue to the ancestor element of the higher level by analogy
Static: Default value, no positioning enabled
Fixed: fix position of open element IE6 does not support fixed positioning most and absolute positioning, the different points will always be relative to the browser window to locate, do not scroll with the scroll bar
Z-index property does not take effect until no one is position
4. Text Wrapping
Word-break:break-all;
5. Triangles
1) page
2) Code
width:0px; border-width:0 100px 100px; Border-style:solid; Border-color:transparent Transparent red;
6. Practice
1) page
2) Code
<! DOCTYPE html>Front-End Basics (2) CSS