1.    瀏覽器字首（無字首屬性總是放在最後）

    對於任何新的樣式，最終規範可能與瀏覽器渲染它的方式稍微不同。

-webkit-border-radius: 10px;     //蘋果Safari瀏覽器和谷歌的Chrome瀏覽器
-moz-border-radius: 10px;       //Firefox瀏覽器
-o-border-radius: 10px;         //Opera瀏覽器
border-radius: 10px;

注：Autoprefixer:一個以最好的方式處理瀏覽器字首的後處理程式。

2.    IE盒模型

IE8及以上和其他瀏覽器：width和height指的是內容（content）;

IE8以下為IE 盒子模型，width和height包括content、padding、border.

3.  IE6、7下display:inline-block的相容性

大致描述：IE6、IE7支援對html行內元素設定inline-block。實際上只是看起來支援而已，IE6、IE7並不識別inline-block這個屬性值，只是觸發了layout，讓行內元素有了inline-block的表徵，比如說：行內顯示且可設定寬高等等。

實現塊級元素的inline-block屬性值設定：詳解

div { display:inline-block; _zoom:1;_display:inline;}/*推薦IE6*/
div { display:inline-block; *zoom:1;*display:inline;}/*推薦IE6或IE7*/
 

下劃線（_）是隻有IE6才能識別，而星號（*）是隻有IE6和IE7可識別，作用就是用於區分不同瀏覽器的。

zoom始終可以觸發layout, 而_display:inline;或者*display:inline;是為了讓元素重新獲得display:inline;的屬性。

4.    haslayout是IE7-瀏覽器的特有屬性

有兩種狀態：true或false。當其為true時，代表該元素有自己的佈局，否則代表該元素的佈局繼承於父元素。

CSS屬性

　　可以觸發hasLayout的有如下CSS屬性：

　　【1】display:inline-block
　　【2】height/width:除了auto
　　【3】float:left/right
　　【4】position:absolute
　　【5】writing-mode(IE專有屬性，設定文字的垂直顯示):tb-rl
　　【6】zoom(IE專有屬性，設定或檢索物件的縮放比例):除了normal

【IE7專有的觸發hasLayout的CSS屬性】

　　【1】min-height/max-height/min-width/max-width:除none
　　【2】overflow\overflow-x\overflow-y:除visible
　　【3】position:fixed

  5.    em、px、rem

        em是相對於應用於當前元素的字型尺寸，而百分比則是相對於父元素的尺寸。

em：如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。我們在寫CSS的時候，需要注意三點：

        1. body選擇器中宣告Font-size=62.5%；

        2. 將你的原來的px數值除以10，然後換上em作為單位；

        3. IE底下，“em”會有一個問題存在。調整字型大小的時候，同樣會打破我們的彈性佈局，需要設定：

     html {font-size: 100%}

rem：只是相對HTML根元素大小，(IE8以上,對於不支援它的瀏覽器，就多寫一個絕對單位的宣告)

如果你的使用者群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮相容性，那就使用px,或者兩者同時使用。

        如果希望隨著當前元素的字型尺寸em是相對於應用於當前當前元素的字型尺寸；而百分比則是相對於父元素的尺寸。寸而改變尺寸，則使用em最佳，如：行高、字型大小。相反，如果是隨著父容器或者是整體頁面佈局而改變尺寸，則使用%更好，如元素的高度和寬度設定。

6、繼承的樣式權重最小

<div class="box">
    <a href="#">層疊</a>
</div>

.box { color: red}

    繼承的顏色並不會顯示，因為繼承的樣式權重最小，瀏覽器對a標籤設定了預設樣式，將繼承的樣式層疊了。

7、calc() 函式 （結合媒體查詢，實現響應式佈局）

.box img {
    width:calc(100%/4 - 40px);
    margin:20px;
    float: left;
}
@media (max-width :600px){
    .box img {
      width:calc(100%/2 - 40px);
    }
}

 8、垂直外邊距合併

判斷兩個margin是否會摺疊，要判斷他們是否滿足以下三個條件：

1. 都在普通流中
2. 在同一個塊級格式化上下文中
3. 沒有被行盒、空隙、內填充、邊框阻斷

9、透明度設定

.alert {
    opacity:0.8;
    filter:alpha(opacity=80); //相容IE
}

10、浮動float

因為浮動元素脫離文件流，所以包圍的圖片的文字的div不佔據空間。

浮動的特點：1.  .item {float: left;} ,則item2 除了文字，其他內容都不可見

                    2.    行內元素設定浮動後形成一個塊框，因此可以使用width、height、margin和padding 

清除浮動：

    1、父級元素設定

.parent {
       overflow: hidden;
       *zoom: 1; //相容IE6、7
}

    2、偽類元素清除浮動

選擇符  .clear::after{
            content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
              }
.clear{zoom:1;} //相容IE6、7

11、BFC（block formating context）:塊級格式化上下文

• 特點：  1.  在一個塊級格式化上下文中，塊框會朝著垂直方向一個接一個的排列    2.在一個塊級格式化上下文中，包含裡面的所有元素，但不包含建立了新塊格式化上下文的元素。（結合上一點理解）
• 建立BFC的情況： a. 浮動float不為none； b. position值為absolute、fixed的元素  c. display不為block 的元素 d.overflow不為visible的元素。

12、overflow ：hidden;  能清除浮動的原因

        不僅對超出的內容進行了處理，而且建立了BFC，使父元素重新自適應了子元素，順便清除了浮動。

13、高度設定百分比的情況 height：100%；

•     父元素在不設定高度的情況下，是自適應子元素的高度的
•     在高度為0或不設定高度的情況下，高度是文字的行高，但是設定了高度則用的是設定的高度而不再是行高

{
    height:100px;
    line-height:30px;
    }    高度為100px

14、行內元素（或display:inline;）

有兩個特點：1.  上下外邊距、width、height不會起作用

                    2.  padding會起作用，但是padding-top、padding-bottom不會佔據位置，而且會把其他元素蓋住。

15. inline和inline-block會引起間距的空格

解決方法：1.  可以給父元素新增font-size:0;  但是文字的內容會消失；

                 2.  父元素letter-spacing: -5px; 設定合理的值，

                3.   直接設定浮動  

16、auto

無意義的auto:      

•   對於行內元素，左右外邊距設定為auto,其結果為0  （因為行內和行內塊的空間只有自身的那些位置，那些位置都讓高度和寬度佔據，而寬度和高度是根據內容決定的）