1.元素水平居中
內聯元素水平居中text-align:center;
塊元素水平據居中margin:0 auto;
2.單行文字垂直居中
height:n px;
line-height:n px;
3.文字相對圖片、輸入框垂直居中
vertical-align:middle;
4.元素自適應高度
父元素未指定高度,子元素有浮動,父元素不能自增。
overflow:hidden|auto;
5.background
元素背景覆蓋范圍:
IE7:content+padding
IE8+,FF:content+padding+border
body背景覆蓋范圍:content+padding+border+margin
6.margin
塌陷:豎直排列的塊級元素之間的間隔是margin-bottom和margin-top兩者中的較大值。
成父子關系的塊級元素,子元素的margin以父元素的content為參考,倘若子元素的content+margin的高度超過了父元素高度值,IE會自動擴大,保持子元素的margin-bottom和父元素的padding-bottom,FF則保持父元素高度不變,子元素會超粗父元素范圍。
成父子關系的塊級元素,如果父元素和子元素之間沒有其他元素,瀏覽器則會把子元素的margin-top作用于父元素。
可給父元素設置以下屬性:
padding-top:n px;
overflow:hidden|auto;
position:absolute;
display:inline-block;
float:left|right;
7.position
absolute:使用絕對定位的元素以最近的已經定位的祖先元素為基準進行偏移,若沒已經經定位的祖先元素則以瀏覽器窗口為基準進行偏移;絕對定位的元素從標準文檔流中脫離,對其他元素的定位沒有影響。設置絕對定位而不設置偏移的元素將脫離文檔流且保持在原來的位置。
fixed:固定定位的元素以瀏覽器窗口為基準進行定位。
8.z-index
z-index屬性取值為auto|number,作用于position屬性設置為relative|absolute|fixed的元素。
同一個層疊上下文中,層疊級別大的顯示在上,層疊級別小的顯示在下;相同層疊級別時,遵循后來居上的原則;不同層疊上下文中,元素顯示順序以父級的層疊級別來決定顯示的先后順序,與自身的層疊級別無關。
9.border
單獨設置border-left|right|top|bottom寫出多樣的三角形狀。
{
border: n px solid color;
border-left|right|top|bottom-color: color|transprent;
}
10.偽類
(1)鏈接偽類出現的順序必須遵循a:link a:visited a:hover a:active
(2):after和:before
element{position:relative;}
element:after,element:before{
position:absolute;
content:" ";
content: attr data-letter;
}
11.溢出省略
white-space:?nowrap;//限制文本換行
overflow:?hidden;//溢出隱藏
text-overflow:?ellipsis;//顯示省略標記
-o-text-overflow:ellipsis;//兼容Opera