CSS排版:数值和单位

CSS学习系列

CSS单位

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

Last modified: 2019年11月14日

Previous Story

CSS学习系列

CSS布局:对齐

css对齐:CSS行高垂直外边距可以使用水平内边距、边框和外边距调整它们的间距。css对齐常常包括有:居中对齐,文字两端对齐,两端对齐,右对齐,左对齐,靠右对齐,文字对齐。

...

Next Story

CSS学习系列

CSS排版:边距

css边距:在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

...