众所周知CSS技术我们虽然很熟悉,在使用的过程却很容易被困住,这让我们在新问题出现的时候变得很不利。随着web继续不断地发展,对于新技术新解决方案的要求也会不断增长。因此,作为网页设计师和前端开发人员,我们别无选择,必须熟悉我们手上的工具,做到知己知彼,这样才能百战不殆。
这就意味着有那么些个特别的货,虽然平常都不怎么会用上,但是一旦某个地方需要它们了,他们就真的是特么得合适不过来了呢。
rem
我们首先介绍下和我们熟悉的很相似的货。 em 被定义为相对于当前对象内文本的字体大小。炒个栗子,如果你给body小哥设置了font-size字体大小,那么body小哥的任何子元素的1em就是等于body设置的font-size。
<body>
<div class="test">Test</div>
</body>
body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
你看,这里div这娃的字体大小是1.2em。解释来说,就是他从body爹爹那里继承的字体大小(这里是14px)的1.2倍,结果就是16.8px。
但是,如果你用em一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢?在下面这一小段代码里我们应用了和上面一样一样的CSS,每一个div都从它上一级父元素继承了字体大小,并且逐渐得增加。
<body>
<div>
Test <!-