css3(7)

精简版：

1. 像素px，相对长度单位。像素px是相对于显示器屏幕分辨率而言的,屏幕长和宽一定，屏幕分辨率越小，说明1px越大。
   PX特点:
   a, 低版本IE无法调整那些使用px作为单位的字体大小；
   b, 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
2. em:是相对长度单位，相对于父元素，若父元素都未设置，则相对于浏览器的默认字体尺寸。
   任意浏览器的默认字体高都是16px，16px*62.5%=10px
   所以我们在写CSS的时候，需要注意两点：
   a. body选择器中声明Font-size=62.5%；
   b. 将你的原来的px数值除以10，然后换上em作为单位；
3. rem:是css3新增的一个相对单位，与em相比，rem相对的只是HTML 根元素，html{font-size:62.5%;}目前，除了IE8及更早版本外，所有浏览器均已支持rem。
4. pc端px用的比较多，移动端rem用的比较多。
5. 兼容性问题：一般出现浏览器兼容性问题的原因可能是没有自己设置浏览器的默认样式造成的。
   a .margin-bottom 和margin-top问题：
   .topdiv{
   width:100px;
   height:100px;
   border:solid 1px #000;
   margin-bottom:25px;
   }
   .bottomdiv{
   width:100px;
   height:100px;
   border:solid 1px #000;
   margin-top:50px;
   } 此时两个盒子之间的间距是比较大的那一个。
   如果设置浮动，又能够相加了。
   .topdiv{
   width:100px;
   height:100px;
   border:solid 1px #000;
   margin-right:25px;
   float:left;
   ｝
   .bottomdiv{
   width:100px;
   height:100px;
   border:solid 1px #000;
   margin-left:50px;
   float:left
   } 此时，两个盒子相距75px。
   b .a标签的四种状态排序问题：
   love hate原则 l(link)ov(visited)e h(hover)a(active)te。
   c .行内元素对于margin的支持不是很好
   div{
   background:gray;
   padding:20px;
   }
   span{
   background:green;
   padding:20px;
   margin:20px;
   display:inline-block;
   }
   d .p标签撑不开div,盒子坍塌
   解决方法：给p标签上下各加一个div

 <div id="box">
     <div style="height:0px;overflow:hidden"></div>
     <p>p对象中的内容</p>>
     <div style="height:0px;overflow:hidden"></div>
 </div>
 #box p{
     margin-top:20px;
     margin-bottom:20px;
     text-align:center;
     }  主要是overflow="hidden"

    e .引入base.css重置各浏览器默认属性值。

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0px;padding:0px;}
table{border-collapse:collapse;border-spacing:0px;}
fieldset,img,abbr,acronym{border:0px;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:”;}
详解见：http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html

em,rem,px之间的转换
::>_<::我们在写css样式时，经常会遇到字体大小在不同的浏览器不同的设备上显示不一致的情况，一般有这几种单位可供开发者选择：em,rem,px。下面我就介绍一下这几种单位
一、px：是像素（Pixel）的简写。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
PX特点:
1、 IE无法调整那些使用px作为单位的字体大小；
2、 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3、 Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
二、em:是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
1、任意浏览器的默认字体高都是16px。
所有未经调整的浏览器都符合: 1em=16px
那么12px=0.75em,10px=0.625em。
为了简化font-size的换算，需要在css中的body选择器中声明 Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
所以我们在写CSS的时候，需要注意两点：
a. body选择器中声明Font-size=62.5%；
b. 将你的原来的px数值除以10，然后换上em作为单位；
2、重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
em特点
（1）、 em的值并不是固定的；
（2）、 em会继承父级元素的字体大小。
三、rem:是css3新增的一个相对单位（root em，根em）
rem，这个单位引起了广泛关注。这个单位与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反 应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。
对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略 用rem设定的字体大小。
PS：下面是一个px,em,rem单位转换工具
http://pxtoem.com/