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;300px;height:200px;"><div style="margin-top:20px;background-color:#444;200px;height:100px;"></div></div>

      发现了一本好书，张鑫旭的博客时不时都有看，最近发现他写了一本书：《css世界》，我在线试读了下（试读链接），还真的挺好的。刚好是我需要的，我觉得我css很差，趁有时间是应该好好补补。目前只看了一小部分，觉得帮助很大，好书，我喜欢。下面说一下在这本书学到的东西：

       iscroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。