CSS学习笔记:长度值和颜色

长度值

这里写图片描述

demo

相对字体

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元素的前景色,这会把所有没有其他样式的文本变成设置的颜色(像锚就不包括在内,锚有自己的颜色样式)。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值