最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

CSS排版:数值和单位

CSS学习系列 林雍岷 103浏览

CSS单位:对于网页布局的单位,只知道 px 是仅仅不够的,还需要知道其他几个比较常见的单位,特别是css3推出的一些新的度量单位。 em. em 是一种相对单位,它相对于父元素的字体大小。设置排版的font-size和line-height属性时,可以使用多种类型的单位,如rem,em,px,vw,甚至可以没有单位。

有些值通过特定的单位来指定与之相对应的值——你是想把你的盒子(box)宽度设置为30像素(pixel), 30厘米(centimeter)还是30em呢?

如何使用单位

1、.px{font-size:18px}、.em{font-size:1.125px}、.rem{font-size:1.125px}
2、em、rem继承浏览器默认的字体大小,chrome://settings/fonts 查看效果,从这里可以看出px不是好用的;
3、在div.em添加div.em,div.em>div.em,在div.rem添加div.rem,div.rem>div.rem,看看效果,查看元素找原因;
4、没有单位设置:
1、div.without_unit
1、line-height:1.3 这个元素(p)的固定高度
2、div.with_unit
1、line-height:1.3em,这个div(h1+p)的固定高度
5、vw(viewpoint width) 自动适配是最好

谷歌浏览器技巧:

chrome:/settings/fonts

转载请注明:林雍岷 » CSS排版:数值和单位