欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  css字体单位有好多种,我们这里只介绍%,px,em,rem这几种吧
 
  1.百分比%
 
  2.px像素(pixel)。相对长度单位。像素px时相对于显示屏幕分辨率而言的。
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <title></title>
 
  <styletype="text/css">
 
  .div1{
 
  font-size:20px;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <divclass="div1">
 
  字体为20px
 
  </div>
 
  </body>
 
  </html>
 
  2、em是相对长度单位。相对于对象文本内的字体尺寸。如果当前行内文本的字体尺寸未被人为设置,则相当于浏览器默认字体尺寸。
 
  任意浏览器的默认字体大小都有是16px。所有未经调整的浏览器的字体尺寸都符合:1em=16px。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <title></title>
 
  <style>
 
  body{
 
  /*相对于浏览器的字体大小16px定义,此时浏览器的字体大小为10px,便于以后计算*/
 
  font-size:62.5%;
 
  }
 
  .div1{
 
  font-size:2em;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <divclass="div1">
 
  字体2em相当于20px
 
  </div>
 
  </body>
 
  </html>
 
  em的特性
 
  1.em的值并不是固定的。
 
  2.em的值会继承父级的字体大小。
 
  3.rem是css3新引进的一个相对单位(rootem)rem仍然是一个相对大小,但是值相对于HTML。通过它既可以做到知修改根元素就成比例的调整所有字体大小,又可以避免字体大小逐层复合的连锁反应
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <title></title>
 
  <style>
 
  .div1{
 
  /*相对于HTMl字体*/
 
  font-size:2rem;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <divclass="div1">
 
  字体2rem相当于32px
 
  </div>
 
  </body>
 
  </html>





本文转载自中文网

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c55421.shtml