小結一下前端html+css的經驗 （四）

1.Line-height 是不錯的屬性，能夠在豎直對齊有很大做用，可是它並非對全部標籤有效，如：img  select，此時你能夠想到一個屬性：vertical-align:middle; 而後 margin-top:-px

 

2.letter-spacing和word-spacing這兩個屬性都用來添加他們對應的元素中的空白。letter-spacing添加字母之間的空白，而word-spacing添加每一個單詞之間的空白

 

3.儘可能少用 來控制間距，加載的時候「閃」一下很不舒服。用標籤的width，margin和padding也少用，兼容問題會少一些，更重要的是，一旦用到JQuery動畫，你的那些個padding和margin，差生的動畫效果用戶體驗不好。

 

4.z-index是個好東西，尤爲複雜定位的頁面，可是在ie7 容易混亂，必定要給要給浮動的層的最上層的父級模塊標籤也寫上z-index

5.關於換行

1.word-break:break-all;只對英文起做用，以字母做爲換行依據

2. word-wrap:break-word;只對英文起做用，以單詞做爲換行依據

3.{white-space:pre-wrap;只對中文起做用，強制換行

4.{white-space:nowrap;強制不換行，都起做用

5.{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不換行，超出部分隱藏且以省略號形式出現

6.定位：position。 

       1.static  默認的定位方式，歸屬文檔流，從左到右，從上到下排列。

       2. relative 浮動定位，沒有徹底脫離文檔流，相對於父級定位，其餘塊的，就無論了，超出父級板塊的時候，會浮動在其餘元素上面。固然，也能夠用z-index控制它的浮動層次。

    3.absolute  絕對定位。徹底脫離文檔流，相對於瀏覽器中的內容定位的，如right:0，這個模塊就永遠沾在瀏覽器內容右邊窗口，即便縮小窗口，仍是緊靠窗口內容右邊。值得一提的是，若是該absolute的模塊，不寫top\left\bottom\right，它會遵照父級內的文檔流格式佈局，此時它後面的模塊會往前走。

    4.fixed 對象定位聽從絕對(absolute)方式，不一樣的是，它不是相對內容定位，而是相對瀏覽器可視區定位，效果特別好，不支持ie6，其餘瀏覽器都支持良好。。

7.min-height最小高度 、min-width最小寬度、max-height最大高度、max-width最大寬度：

這幾個屬性至關實用，尤爲作手機網頁的時候，不知道手機什麼型號，屏幕是多大，因此這幾個屬性很是有用。