CSS单位

%  支持百分比作为单位的属性很多 大致分3类

1，width height  font-size的百分比是相对于父元素 "相同属性"的值来计算的
2，line-height的百分比是相对于父元素的font-size的值来计算的
3，vertical-align 的百分比是相对当前元素的line-height值来计算的

font-size属性，如果父元素width为100px, 子元素width为50%， 则表示子元素实际的width 是50px
                        如果父元素font-size:30px  子元素font-size:50%; 则表示子元素实际font-size是15px


   

  <style>
    #father{
      border:solid red 1px;
      width: 200px;
      height: 160px;
      font-size: 30px;
    }
    #son{
      border:solid green 1px;
      width:50%;
      height: 50%;
      font-size: 50%;
    }
 
  </style>

  <div id="father">
    这是一个div元素
    <div id="son">这是一个div元素</div>
  </div>

 
总之 百分比参考是父元素（如宽度  字体大小......）

 <style>
    .divFather{
      background-color: #aaa;
      width: 50%;/* 参考父元素，他的父元素是body  body(整个浏览器窗口的一般) */
      height: 200px;
    }

    .divSon{
      background-color: red;
      width: 50%; /* #divFather 宽度的一半 */
      height: 50px;
    }
  </style>

<div class="divFather">
  <div class="divSon"></div>
</div>

 

 

---

em

em 是相对于"当前元素" 的字体大小而言的，这里的字体大小指的是以px为单位的font-size值
如当前元素的font-size值为10px 则1em = 10px;        当前元素的font-size值为20px 则1em = 20px; 以此类推
如果当前元素的字体大小 没有定义，那会继承父元素的字体大小，如果当前元素的所有祖先元素 都没有定义字体大小，则会继承浏览器默认的字体大小 16px

em 的三个技巧
1，首行缩进使用 text-indent: 2em   
     段落首行缩进会缩进2个字的距离，如需实现这个效果 text-index值 应该是 font-size值的两倍，
     对于首行缩进em 比 px 作为单位要好，因为不管font-size定义多少px ，只需将text-indent定义为2em即可

2，使用em作为统一单位

  如果使用浏览器默认的字体大小16px，其中em 和 px的对应关系
    1em=16px *1 =16px
    0.75em=16px * 0.75=12px

    为简化font-size的计算，在CSS中提前声明 body{font-size:62.5%}
     默认的字体大小变为16px *62.5% = 10px  此时em 和 px的对应关系
     1em = 10px
     0.75em=7.5px

     也就是说只需将原来的px值除以10,然后换上em作为单位即可

 

 

例子1

  <style>
    body{font-size: 622.5%;}
    #p1{font-size: 1em;}
    #p2{font-size: 1.5em;}
    #p3{font-size: 2em;}
    div{border:solid red 2px;}
  </style>

  <div>
    <p id="p1">当前的字体大小为1em,也就是10px</p>
    <p id="p2">当前的字体大小为1.5em,也就是15px</p>
    <p id="p3">当前的字体大小为2em,也就是20px</p>
  </div>

 

 

例子2

<style>
    *{padding: 0;margin: 0;}
    html{font-size: 62.5%;}
    p{border:solid green 2px;display:inline-block}
    /* px */
    #p1{
      font-size: 15px;
      width: 150px;
      height: 75px;
      text-indent: 30px;
    }
 /*em*/
 /* 
 实际中em，一般需要计算两次
 第一次：当前元素font-size属性的px值
 第二次: 当前元素其他属性(如width  height)的px值
 在例子中当前元素的font-size是10px *1.5em = 15px;
 如果width 和 height也要以em为单位，就要以当前元素的font-size值(15px) 再计算一次
 width:150px / 15px=10em
 height:75px /15px =5em
  */
 #p2{
      font-size:1.5em; /* 15/10=1.5 */
      width:10em;     /* 150/15 =10 */
      height:5em;    /*75/15=5  */
      text-indent:2em; 
    }
  </style>
 
    <p id="p1">这是一个富有活力的技术网站</p>
    <p id="p2">这是一个富有活力的技术网站</p>

 

 

3，使用em作为字体大小单位
最佳选择使用em 作为单位 来定义字体大小
当需要改变整体的文字大小时，只需要改变根元素字体大小即可，工作量变少
这个特点，在跨平台网站开发中有明显优势

---

rem
是相对于根元素( html元素）的字体大小
rem布局也是移动端常用的字体大小之一 ，除IE8 及以前的版本之外，大部分浏览器都支持rem

rem 和 em相似，但也有区别：
em：是相对 当前元素的字体大小
rem: 相对于根元素的字体大小
这里的font-size指的是以px为单位的font-size值

  <style>
    html{font-size:62.5%;}
     #father{   
      width:200px;
       height: 160px;
       border:solid red 1px;
       font-size: 2rem;
     }
     #son{
       width: 150px;
       height: 100px;
       border:solid red 1px;
       font-size: 2rem;
     }
  </style>
 
   <div id="father">
     这是一个div元素
     <div id="son">这是一个div元素</div>
   </div>