字体属性

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; }

你可能感兴趣的