对于绘图和印刷而言,「单位」很相当重要的,然而在网页排版里,单位也是同样具有重要性,在CSS3 普及以来,更添加了一些方便好用的单位( px、em、rem.. .等),这篇文章将整理这些常用的CSS 单位,希望能够帮助到你在工作上能使用的更加得心应手。 「网页」和「印刷」的单位目前我们接触的范围来说,若要把单位做区分,最简单可以分为「网页」和「印刷」两大类,通常对于CSS来说只会应用到网页的样式,毕竟真正要做印刷,还是会倾向通过排版软体来进行设计。 网页( 单位 )
网页( 属性名称 )
印刷(简单了解下)
示例展示以下将展示四种不同单位的示例,为了直观简单,四个示例都套用预设的div格式,纯粹改变font-size看看有何不同,由于子元素若没有设定font-size,会自动继承父元素的font-size,使用上就应该要预先初始化字体大小,下面这两段CSS可以将所有的元素字体大小预设为16px,接下来可以进行个别调整。 html{ font-size:16px;}html * { font-size: 1rem;} 1、px px 是绝对单位,因此只要设定多少px,就会精确的呈现,对于一些讲求精准位置的排版而言十分有用,如示例展示的,指定多大 px 字体就会多大。 <div style='font-size:16px;'>16px <div style='font-size:20px;'>20px <div style='font-size:24px;'>24px <div style='font-size:16px;'>16px <div style='font-size:32px;'>32px</div> </div> </div> </div></div> 2、em em是相对单位,为每个子元素通过「倍数」乘以父元素的px值,如果我们每一层div都使用1.2em,最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。(浏览器预设字体大小为16px,若无特别指定则会直接继承父元素字体大小) <div style='font-size:1.2em;'>1.2em <div style='font-size:1.2em;'>1.2em <div style='font-size:1.2em;'>1.2em <div style='font-size:1.2em;'>1.2em <div style='font-size:1.2em;'>1.2em</div> </div> </div> </div></div> 3、rem rem是相对单位,为每个元素通过「倍数」乘以根元素的px值,如果我们每一层div都使用1.2rem,最内层就会是16px x 1.2 = 19.2px。(根元素指的是html的font-size,预设为16px )。 <div style='font-size:1.2rem;'>1.2rem <div style='font-size:1.2rem;'>1.2rem <div style='font-size:1.2rem;'>1.2rem <div style='font-size:1.2rem;'>1.2rem <div style='font-size:1.2rem;'>1.2rem</div> </div> </div> </div></div> 4、% %百分比是相对单位,和em大同小异,简单来说em就是百分比除以一百,如果我们每一层div都使用120%,就等同于1.2em,最内层就会是16px x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。 <div style='font-size:120%;'>120% <div style='font-size:120%;'>120% <div style='font-size:120%;'>120% <div style='font-size:120%;'>120% <div style='font-size:120%;'>120%</div> </div> </div> </div></div> 5、small、medium、large...等 字体大小的属性有七种,分别是xx-small、x-small、small、medium、large、x-large和xx-large,除了x-small,其余六种分别对应h6~h1的标签文字大小,根据W3C的规范,以medium预设16px为基础(若html字体预设大小改变,medium也会跟着变),使用固定的百分比乘以medium的大小,例如ss-small预设为16px x 0.6 = 9.6px(浏览器显示为12px )。 <div style='font-size:xx-small;'>xx-small <div style='font-size:x-small;'>x-small <div style='font-size:small;'>small <div style='font-size:medium;'>medium <div style='font-size:large;'>large <div style='font-size:x-large;'>x-large <div style='font-size:xx-large;'>xx-large</div> </div> </div> </div> </div> </div></div> 6、larger、smaller larger 和smaller 就是固定百分比为单位,larger 为父层的120%,smaller 为父层的80%。 <div style='font-size:medium;'>medium <div style='font-size:larger;'>larger <div style='font-size:larger;'>larger <div style='font-size:larger;'>larger <div style='font-size:smaller;'>smaller <div style='font-size:smaller;'>smaller <div style='font-size:smaller;'>smaller</div> </div> </div> </div> </div> </div></div> 小结熟悉了字体大小单位之后,你就更够能有系统的进行设计整个网站的CSS字体架构,不过font-size 本身和font-family 有着一些复杂的关系,不同的font-family 有时也会影响font-size 的设定,因此使用上还是得稍微注意一下啰! |
|