长度值
相对字体
em
1em:父元素的font-size大小。
em会继承父元素的字体大小,因此其实是相对于父元素的font-size进行计算的。
因为em是相对于父元素进行计算的,因此如果一层一层嵌套:
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}
<body>
<div>
Test <!-- 14 * 1.2 = 16.8px -->
<div>
Test <!-- 16.8 * 1.2 = 20.16px -->
<div>
Test <!-- 20.16 * 1.2 = 24.192px -->
</div>
</div>
</div>
</body>
每一层都会在上一层的基础上重新计算font-size大小,而我们有时不希望出现这种叠加计算的效果,这时就要使用rem。
rem
‘r’是“root”的缩写,意思就是1rem等于根元素的字体大小;大部分情况下,根元素就是<html>
元素了。
这样的话每一个元素都是相对于根元素的font-size大小计算,不会形成上面那种根据父元素计算而层层叠加的效果。
ex
为当前字体小写字母x的高度。
在很多字体中 1ex ≈ 0.5em。
相对视口
vw,vh
响应式web设计离不开百分比。但是,CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口(viewpoint)的宽度或者高度,而不是父元素的,那该肿么办? 这就是 vh 和 vw 单位为我们提供的。
vw:相对于视窗的宽度。视窗的宽度是100vw。
vh:相对于视窗的高度。视窗的高度是100vh。
这里的视窗指的是浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight,不包含任务栏标题栏以及底部工具栏等。
这三个相对于视窗的单位有一系列应用:
- 视区覆盖
.element {
width: 100vw;
height: 100vh;
}
然后再将此元素定位到视区左上角,就可以实现视区的完整覆盖。
可以用来实现模态框的半透明覆盖层。
vmin,vmax
vmin
视口高度和宽度之中的最小值的 1/100。
vmax
视口高度和宽度之中的最大值的 1/100。
我们应该在什么场景下使用这两个单位呢?
假设有一个元素,你需要让它始终在屏幕上可见。只要对其高度和宽度使用vmin单位,并赋予其低于100的值就可以做到了。再来个栗子,可以这样定义一个至少有两个边触摸到屏幕的方形:
.box {
height: 100vmin;
width: 100vmin;
}
如果你要让这个方形框框始终铺满整个视口的可见区域(四边始终触摸到屏幕的四边):
.box {
height: 100vmax;
width: 100vmax;
}
前景色
/* A CSS Level 1 color */
color: red;
/* The only color added in CSS Level 2 (Revision 1) */
color: orange;
/* CSS Level 3 color, sometimes called a SVG or X11 color */
color: antiquewhite;
/* The color 'lime' with the 3-character dash notation */
color: #0f0;
/* The color 'lime' with the 6-character dash notation */
color: #00ff00;
/* A color using the available functional notations */
color: rgba( 34, 12, 64, 0.3);
要设置一个元素的前景色,最容易的办法就是利用属性color。
对于非替换元素,color属性设置了元素中文本的颜色。
影响边框
color值可以影响元素周围的边框。
默认地前景色会应用到边框,要覆盖这种行为,最基本的办法就是使用属性border-color。
影响表单元素
从理论上讲也可以为表单元素设置color值。
select{
color:rgb(33%,33%,33%);
}
这会令select元素的文本变成暗灰色。
可能还会设置select元素周围边框的颜色,也可能不会,取决于用户代理。
另外,还可以设置input元素的前景色,会把所设置的颜色应用到所有输入元素,从文本框到单选按钮再到复选框都会使用这种颜色。
可以利用属性选择器来为不同类型的input元素指定不同的文本颜色。
input[type="radio"]{color:#333}
input[type="checkbox"]{color:#666}
继承颜色
color属性是可以继承的。因此如果声明了body元素的前景色,这会把所有没有其他样式的文本变成设置的颜色(像锚就不包括在内,锚有自己的颜色样式)。