1, display an ellipsis
. A set width;
b.white-space: nowrap; (vacant space)
c.overFlow: hidden; (clear float)
d.text-overflow:ellipsis;
2, location
position: relative; relative positioning occupy positions;
position: absolute; absolute positioning does not account for position;
position: fixed; bulk transfected with a fixed position;
3, clear float
1. The parent box set the height of the floating element
2. Parent box floating element is provided: overflow: hidden
3. After the floating element to an empty box, the box is provided to: {clear: both, height: 0, overflow: hidden}
4.万能清除浮动::after{content:’ ’, clear:both,height:0,display:block, overflow:hidden ,visibility: hidden }
4, anchor
<Tag id = "name"> SUMMARY </ marker>
<a href="#命名">
5, Sprite map
<div>
<span> Sprite stitching </ span>
</ div>
div {
background: URL (address) NO-REPEAT 0px 0px;
}
span {
background-position: 0px 0px;
}
6, browser compatibility issue
a, Transparency: Other browsers: opactiy: value; (0-1)
IEs browser: filter: alpha (opacity = value ); (0-1)
b, :( double float to double margins) display: inline;
c, the default height: (IE6) font-size: 0 or overflow: hidden;
d, the image gap: display: block or on the same line
e, inconsistent form high line: float: left;
f, the percentage of bug: add a statement clear: right;
g, default button size inconsistent: Uniform size f (analog with a label)
h, background-size, background: rgba (); failure in ie8