字体属性

font-size:

字体demo
css中强大的em值

• 绝对大小值

  font-size: xx-small;
  font-size: x-small;
  font-size: small;
  font-size: medium;
  font-size: large;
  font-size: x-large;
  font-size: xx-large;
  

• 相对大小值(相对于父元素字体而言)

  font-size: larger;
  font-size: smaller;
  

• 长度值(最常用)

  font-size: 12px;
  font-size: 0.8em;
  

• 百分比(也是相对于父元素)

  font-size: 80%;
  

几点总结

• 浏览器默认的字体大小是16px;
• 字体大小会继承父元素；
• 基于用户阅读的考虑，浏览器支持的最小的字体值是12px。即使设置小于12px的字，显示的值也是12px。
• 设置 font-size: 0，字就隐藏了。
• 如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算。（需要转换的像素值/父元素）
• 如果元素设置了字体大小
  1） 字体大小：需要转换的像素值/父元素的font-size
  2）border、width、height、padding、margin、line-height：需要转换的像素值/元素自身的font-size

弹性布局样例：

• 需求：设置了一个宽度为“740px”居中，带有上下“margin”为“24px”，而且带有“1px”的边框效果著作权归作者所有。

  HTML
    
        
   content here
   
   
  
  CSS
   html {font-size: 100%;}
   body {font-size: 1em;}
   #wrap { 
          width: 46.25em;
          margin: 1.5em auto;
          border: 0.0625em solid #ccc;
          }