1、權重問題    

      內聯樣式表 > id選擇符 > class選擇符 > 型別選擇符（所有html標籤名稱）

      內聯樣式表 > 內部樣式表、外部樣式表

      內部樣式表、外部樣式表的權重與書寫順序有關，後書寫的權重高   

      注：雖然後書寫的權重高，但是屬性依舊被執行，只是相同屬性會被覆蓋，不同屬性仍然顯示

      !important權重最高
      開發者樣式 > 讀者樣式 > 瀏覽器樣式

     ！！！當出現權重的時候就會出現層疊性

2、用css畫三角

     a.將盒子的寬高設為0px；

     b.新增邊框border；

     c.為邊框設定顏色border-color: ，不需要顯示的邊設定為透明色transparent。

3、文字溢位時以省略號顯示

     a.文字設定不換行 white-space:nowrap;

     b.溢位文字隱藏處理  overflow:hidden;

     c.溢位文字以省略號顯示  text-overflow:ellipsis;

     d.前提條件：存放文字的元素必須設有寬度；只能用在單行文字。

4、關於圖片（瀏覽器解析其屬性為inline）可以新增寬高的解答

      img為置換元素（通過標籤或者屬性來改變元素在頁面中的顯示狀態），且置換元素在瀏覽器解析的過程中生成一個框。

      非置換元素：瀏覽器中大多數元素為非置換元素，將內容直接展示給瀏覽器。

5、大圖在小盒子裡居中顯示

      a.為父元素新增定位   position:relative;  子元素新增定位  position:absolute;

      b.子元素向右移動父元素的一半   left:50%;

      c.子元素向左移動自身的一半   margin-left:-寬度一半;

6、圖片整合（精靈圖 css sprites）

      a.整合規則：背景圖必須為透明 （png/gif）；

                           根據實際應用場景，小圖示之間留出足夠的間距；

                           儘量上下排列；

                           如果存在左右排列的小圖示，li列表符號的背景圖放在圖片的最右側。

      b.本質：控制背景圖的位置   background-position:

      c.優點：減少伺服器請求次數；減小圖片質量

7、高度塌陷問題

      a.出現情況：當子元素有浮動，父元素沒有設定高度或者設定了最小高度時，會出現高度塌陷問題。

      b.解決辦法：

              法一：誰塌陷就給誰新增屬性  overflow:hidden;

                 原理：overflow:hidden;出發了BFC，BFC規定計算BFC高度時，浮動元素也參與計算。

                 優點：程式碼量少；缺點：會隱藏定位到父元素外部的內容。

              法二：在浮動元素下方新增一個空標籤，併為空標籤新增屬性  clear:both;

                 原理：both會忽略以上浮動元素預留出來的空間。

                 優點：程式碼量少；缺點：產生不必要的元素，造成程式碼冗餘。

              法三：萬能清除法（閉合浮動）誰塌陷給誰新增    :after{content:" ";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

                  原理：visibility:hidden;對元素隱藏但仍留有空間。

                  優點：解決了以上兩種方法的缺點；缺點：程式碼量相對來說有點多。

8、瀏覽器bug以及解決辦法

             a.當圖片添加了a標籤後，在IE瀏覽器上會出現邊框

                  css hack：給img新增border:0;   或者   border:0 none;

             b.在div中插入圖片，圖片會將div下方撐大大約3px

                   css hack 1：div標籤與img標籤寫同一行；

                   css hack 2 ：將img轉為塊狀元素   display:block;

             c.表單元素對齊方式不一致（不在同一水平線）

                    css hack ：給表單元素新增浮動  float;

             d.按鈕大小不確定（邊框問題）

                    css hack 1：只要按鈕不出現在表單裡都用a標籤做；

                    css hack 2：為按鈕標籤新增一個父元素，並將樣式新增在父元素上   eg:<span><input type="submit"></span>

                    css hack 3：如果按鈕是一張圖片，切圖放在a標籤裡；

            e.滑鼠指標bug    cursor:hand;（只有IE識別）

                     css hack：cursor:pointer;

            f.關於透明度的相容

                      css hack：opacity:屬性值 ;（取值範圍為0-1）

                                       filter:alpha(opacity=屬性值);（取值範圍為0-100）IE

                 opacity：子元素會隨父元素一起透明          rgba：背景透明        transparent：文字透明

             g:margin的bug

                  bug1：給子元素新增margin-top。父元素會一起下移 

                  bug2：縱向margin值不疊加

             h:IE6的bug

                  bug1：雙倍浮向邊界（浮向邊）margin值會雙倍顯示

                      css hack：給浮動元素新增屬性   display:inline;

                  bug2：預設高度  當盒子的高度小於16px時會保持16px顯示（IE預設最小高度為16px，認為內部留有最小文字高度） 

                      css hack 1：font-szie:0;

                      css hack 2：overflow:hidden;

             i:兩個浮動元素的寬 50%+50%>100%

                      css hack：給右側元素新增屬性   clear:right; 

             j:導航條內li和a的bug

                      css hack：給li和a都新增float

9、BFC （block formatting context    獨立渲染區   只有Block-level box參與      概念上的東西，用來解決一些排版問題）

       佈局規則：a.內部box會一個接一個垂直排列；

                         b.Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰Box的margin會發生重疊；

                         c.計算BFC高度時，浮動元素也參與計算；

                         d.BFC區域不會與float box重疊；

                         e.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸；

                        f.BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。

       觸發條件：a.根元素html；

                         b.float不為none；

                         c.position為absolute或fixed；

                         d.display為inline-block / table-cell / table-caption / flex / inline-flew；

                         e.overflow不為visible。

       作用：a.清除內部浮動；

                  b.防止margin值上下重疊（加上一個會觸發BFC的屬性）；

                  c.自適應兩欄佈局

10、繼承性

　　不可繼承的：display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

　　所有元素可繼承：visibility和cursor
　　內聯元素可繼承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform
　　塊狀元素可繼承：text-indent和text-align
　　列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image
　　表格元素可繼承：border-collapse