font-size:
-
绝对大小值
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large; -
相对大小值(相对于父元素字体而言)
font-size: larger;
font-size: smaller; -
长度值(最常用)
font-size: 12px;
font-size: 0.8em; -
百分比(也是相对于父元素)
font-size: 80%;
几点总结
- 浏览器默认的字体大小是16px;
- 字体大小会继承父元素；
- 基于用户阅读的考虑，浏览器支持的最小的字体值是12px。即使设置小于12px的字，显示的值也是12px。
- 设置 font-size: 0，字就隐藏了。
- 如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算。（需要转换的像素值/父元素）
- 如果元素设置了字体大小
1） 字体大小：需要转换的像素值/父元素的font-size
2）border、width、height、padding、margin、line-height：需要转换的像素值/元素自身的font-size
弹性布局样例：
- 需求：设置了一个宽度为“740px”居中，带有上下“margin”为“24px”，而且带有“1px”的边框效果著作权归作者所有。
HTML
<body>
<div id="wrap"> content here</div>
</body>
CSS
html {font-size: 100%;}
body {font-size: 1em;}
#wrap {
width: 46.25em;
margin: 1.5em auto;
border: 0.0625em solid #ccc;
}
网友评论