css學習筆記

如下不少內容引用自：http://www.zhangxinxu.com/，很喜歡看這位大神的文章。        

1.某些標籤有默認的margin，padding值，且不一樣的瀏覽器值可能不一樣

                如：h1~h6，dl,p標籤：有默認margin（top,bottom且相同）值，沒有默認padding值

                     ol,ul標籤：有默認margin-（top,bottom且相同）值，有默認padding-left值

                     th,td標籤沒有默認的margin值，有默認的padding值

                     form標籤在Chrome,Firefox,Safari,Opera,Maxthon,IE8.0中沒有默認的margin,padding值，但在IE6.0,7.0中有默認的margin：19px 0px;

                     select標籤在Chrome,Safari,Maxthon中有默認的margin：2px；在Opera,Firefox,IE6.0,7.0,8.0沒有默認的margin值。

                     option標籤只有在firefox中有默認的padding-left：3px；

   

       2.vertical-align

                全部瀏覽器都支持vertical-align屬性，該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。

                值能夠是xpx，也能夠是x%，text-top，middle,bottom,默認是baseline

       3.font-family 常見中文字體對應的英文名稱

                雖然一些常見中文字體，例如「宋體」，「微軟雅黑」等，直接使用中文名稱做爲CSS font-family的屬性值也能生效，但咱們通常都不使用中文名稱，而是使用英文名稱，主要是規避亂碼的風險。

         

字體中文名	字體英文名	字體應用
宋體	SimSun	中文名 英文名 瀏覽器默認
黑體	SimHei	中文名 英文名 瀏覽器默認
微軟雅黑	Microsoft Yahei	中文名 英文名 瀏覽器默認
微軟正黑體	Microsoft JhengHei	中文名 英文名 瀏覽器默認
楷體	KaiTi	中文名 英文名 瀏覽器默認
新宋體	NSimSun	中文名 英文名 瀏覽器默認
仿宋	FangSong	中文名 英文名 瀏覽器默認

                          詳細請看：http://www.zhangxinxu.com/study/201703/font-family-chinese-english.html

           4.content實現animation loading效果

         

<style>
      .loading{
      	     display:inline-block;
      	     overflow:hidden;
      	     height:1em;
      	     margin-top:-0.3em;
      	     vertical-align:text-bottom;
      }
      *{
      	     box-sizing:border-box;
      	     text-rendering:geometricPrecision;
      }
      .loading.line::after{
      	     content:"/\a-\a\\\a|";   //\a表示換行
      	     text-align:center;
      	     animation:spin4 1s steps(4,end) infinite;
      	     display:inline-table;
      	     white-space:pre;
      }
      @keyframes spin4{
      	     to{
      	     	  transform:translateY(-6.0em);
      	     }
      }
</style>
<span class="loading line" aria-hidden="true"></span>

 

點擊運行

                 其餘例子能夠看這裏：連接

        5.margin雙邊距是IE6下經典的bug之一，產生的條件是：block元素+浮動+margin，使用display:inline;能夠解決這個問題，首先是inline元素或inline-block元素是不存在雙邊距問題的，float:left等浮動屬性能夠讓inline元素haslayout，會讓inline元素表現得跟inline-block元素的特性同樣，支持高寬，垂直margin和padding等，因此div class的全部樣式能夠用在這個display inline的元素上。

        6.margin重疊問題

        

<div style="margin-top:20px;background-color:#ccc;width:300px;height:200px;"><div style="margin-top:20px;background-color:#444;width:200px;height:100px;"></div></div>

 

 

      發現了一本好書，張鑫旭的博客時不時都有看，最近發現他寫了一本書：《css世界》，我在線試讀了下（試讀連接），還真的挺好的。恰好是我須要的，我以爲我css不好，趁有時間是應該好好補補。目前只看了一小部分，以爲幫助很大，好書，我喜歡。下面說一下在這本書學到的東西：

       iscroll是一個高性能，資源佔用少，無依賴，多平臺的javascript滾動插件。