inline-block,float,position,z-index

inline-block 特性：

一、塊在一排顯示

二、內聯支持寬高

三、默認內容撐開寬度

四、標籤之間的換行間隙被解析（問題）【至關字體大小的一半】

五、ie6 ie7不支持塊屬性標籤的inline-block（問題）

 

float浮動：

一、塊在一排顯示

二、內聯支持寬高

三、默認內容撐開寬度

四、脫離文檔流

五、提高層級半層

 

position:relative;  相對定位

a、不影響元素自己的特性；

b、不使元素脫離文檔流；

c、若是沒有定位偏移量，對元素自己沒有任何影響；

定位元素位置控制

top/right/bottom/left  定位元素偏移量。

 

position:absolute;  絕對定位

a、使元素徹底脫離文檔流；

b、使內嵌支持寬高；

c、塊屬性標籤內容撐開寬度；

d、若是有定位父級相對於定位父級發生偏移，沒有定位父級相對於整個文檔發生偏移；

e、相對定位通常都是配合絕對定位元素使用；

 

z-index:[number]；  定位層級

a、定位元素默認後者層級高於前者；

||-------------------------------------------------------------------------------------------------------------------------------------------------------------------

0、計算必定要精確 ,不要讓內容的寬高超出咱們設置的寬高，在IE6下，內容會撐開設置好的寬高。

一、在ie67下，元素要並在同一行，元素都要加浮動。

二、在IE6元素浮動，若是寬度須要內容撐開，就給裏邊的塊元素都加浮動

三、IE條件執行語句<!--[if IE]>這是IE<![endif]-->

四、css hack:\9 IE10以前的IE瀏覽器解析,在樣式的值後加\9; +,* IE7包括IE7以前的IE瀏覽器解析,在樣式前加+或*;_IE6包括IE6以前的IE瀏覽器，在樣式前加_

五、IE6下png透明濾鏡：_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/png.png", sizingMethod="crop");

六、IE6下最小高度問題，在IE6下元素的高度的小於19px的時候，會被當作19px來處理,解決辦法:overflow:hidden;

七、1px dotted（點線） 在IE6下不支持，解決辦法:切背景平鋪

八、在IE6下解決margin傳遞要觸發haslayout即zoom:1;在IE6下父級有邊框的時候，子元素的margin值消失;

九、在IE6，塊元素有浮動和和橫向的margin值,橫向的margin值會被放大成兩倍,解決辦法:display:inline;

十、塊級元素有浮動，margin-right 一行右側第一個元素（橫向）有雙邊距,margin-left 一行左側第一個元素（橫向）說有雙邊距. 解決辦法：給當前加display:inline;

十一、可視寬: 元素內容寬width+padding+border

十二、在IE6，7下，li自己沒浮動，可是li的內容有浮動，li下邊就會產生3px間隙;解決辦法:給li加浮動和寬度或給li加vertical-align；  vertical-align:top還有一個用途是清理img下的圖片空隙問題。

1三、當IE6下最小高度問題，和 li的間隙問題共存的時候 給li加浮動

1四、當一行子元素佔有的寬度之和和父級的寬度相差超過3px,或者有不滿行狀態的時候,最後一行子元素的下margin在IE6下失效

1五、在IE6下的文字溢出BUG,子元素的寬度和父級的寬度相差小於3px的時候,兩個浮動元素中間有註釋或者內嵌元素,解決辦法:把註釋和內嵌元素用div包起來或者將只差調大點 1六、當浮動元素和絕對定位元素是並列關係的時候,在IE6下絕對定位元素會消失,解決辦法:給定位元素外面包個div

1七、未知寬高的img如何在容器裏水平垂直居中: span{ display:inline-block; height:100%;vertical-align:middle;} img{ vertical-align:middle;}

1八、在IE6，7下，子元素有相對定位的話，父級的overflow包不住子元素,解決辦法: 給父級也加相對定位

1九、在IE6下絕對定位元素的父級寬高是奇數的時候，元素的right值和bottom值會有1px的誤差

20、在IE6，7下輸入類型的表單控件上下各有1px的間隙,解決辦法:給input加浮動

2一、在IE6，7下輸入類型的表單控件加border:none;解決辦法: 重置input的背景 

2二、在IE6，7下輸入類型的表單控件輸入文字的時候，背景圖片會跟着一塊移動,解決辦法: 把背景加給父級，並清除自身input的background:none;

2三、position:absolute; 父級元素加絕對定位，子級元素的浮動能夠不用寫清浮動方法； 

2四、position:fixed; 父級元素加固定定位，子級元素的浮動能夠不用寫清浮動方法；

2五、真假的問題：數據類型-數字（NaN）、字符串、布爾、函數、對象（elem、[]、{}、null）、未定義  真：非0的數字、非空字符串、true、函數、能找到的元素、[]、{}  假：0、NaN、空字符串''、false、不能找到的元素、null、未定義 2六、body<html<文檔    body,html{height:100%;}==>body/html/文檔的高度就同樣了。