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

最新推荐文章于 2023-12-02 11:47:38 发布

gigi就是我

最新推荐文章于 2023-12-02 11:47:38 发布

阅读量476

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/crystal6918/article/details/52980509

版权

css 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

长度值

这里写图片描述

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

gigi就是我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记：长度值和颜色

长度值demo相对字体em 1em：父元素的font-size大小。em会继承父元素的字体大小，因此其实是相对于父元素的font-size进行计算的。因为em是相对于父元素进行计算的，因此如果一层一层嵌套：html { font-size: 14px;}div { font-size: 1.2rem;}<body> <div> Test <!-
复制链接

扫一扫

专栏目录