欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    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/c57159.shtml