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

接近10年的互联网从业经验,精通Scrum敏捷软件开发的方法,从事互联网产品设计,开发,测试,运营,案例不少于20个,发现自己最喜欢的工作是做外贸营销,外贸SEO,特别喜欢谷歌优化。从2017年3月开始坚持在群161510483直播谷歌SEO和WEB前端开发技术,只要加进来坚持学习零基础也能够学会。

Last modified: 2019年8月22日

Previous Story

CSS教程

CSS布局:对齐

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

...

Next Story

CSS教程

CSS排版:边距

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

...