长度单位

常见的绝对单位

绝对长度单位有7个，但是web设计中很少使用，下面只介绍最常见的px

单位值	含义	备注
px	像素单位	是相对于屏幕显示器分辨率而言的

px常用于设置图片 border padding margin font-size

常见的相对单位

单位值	含义	备注
%	相对父元素或者元素本身
em	相对父元素字体的大小	1em等于所用字体中小写字母m的长度
ex	相对父元素字体的大小	1ex等于所用字体中小写字母x的高度
rem	相对根节点字体的大小	rem不是万能的,渲染尺寸并不总是整数
vw	视口宽度的1%	和设备的宽度相关联
vh	视口高度的1%	和设备的高度相关联
vmin	vw或vh，取小的那个值。
vmax	vw或vh，取大的那个值。

1.% 相对于父元素的情况

属性	备注
height
width
padding
margin
border
font-size
text-indent	规定文本块中首行文本的缩进

相对于自身元素的情况

属性	备注
border-radius	取决于元素本身的宽高属性
transform:translate()	取决于元素本身的宽高属性
background-size	取决于元素本身的宽高属性
line-height	取决于元素本身的line-height属性
vertical-align	取决于元素本身的line-height属性

2.rem 其中，“r”是root的意思，在HTML网页中，root指的就是元素

html {
    font-size: 16px;
}

则0.5rem就是8px，1rem就是16px，2rem就是32px。

3.一个视区中，宽度为1080 像素，高度为820像素，那么1vw = 10.8px 1vh = 8.2px 1vmin = 8.2px 1vmax = 10.8px

长度单位的经典应用

vh经典应用

当内容高度不足一屏时，让底部栏贴在浏览器窗口的底部；当内容高度超过一屏时，让底部栏贴在页面最下方。

<div class="container">
    <content></content>
    <footer></footer>
</div>

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
footer {
    margin-top: auto;
}

其中，最精彩的就是min-height:100vh，也就是让容器元素的高度至少保持一个视区的高度。

计算函数

calc()

注意：+ - 运算符两侧必须有空白，*和/没有这个限制

最佳实践范例代码

html {
    font-size: 16px;
}
@media screen and (min-width: 375px) {
    html {
        /* 375px作为16px基准，414px宽度时正好对应18px的根字号大小 */
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width: 414px) {
    html {
        /* 屏幕宽度从414px到1000px，根字号大小累积增加4px（18px-22px） */
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 屏幕宽度从1000px往后每增加100px，根字号大小就增加0.5px */
        font-size: calc(22px + 5 * (100vw - 1000px) / 1000);
    }
}

min()

和calc()函数类似，任何可以使用<length>、<frequency>、<angle>、<time>、<percentage>、<number>或者<integer>数据类型的地方都可以使用min()、max()和clamp()这3个函数。

min()函数语法如下：

    min(expression , expression,...)

width: min(10vw, 5em, 80px);

其中出现了2个相对长度值，1个固定长度值，因此上面的width计算值最大就是80px。至于真实的宽度值，如果浏览器视口宽度小于800px，或文字字号小于16px，真实宽度值则会更小。也就是说，虽然函数的名称是min()，表示最小，但实际上这个函数是用来 限制最大值的 。

min()函数的表达式可以是数学表达式（使用算术运算符）、具体的值或其他表达式（如attr()新语法）

    /* 合法 */
width: min(10px * 10, 10em);
width: min(calc(10px * 10), 10em);
width: min(10px * 10, var(--width));

如果我们希望网页在桌面端浏览器中的宽度为1024px，在移动端的宽度为100%，过去是这么实现的：

    .constr {
    width: 1024px;
    max-width: 100%;
}

有了min()函数，我们只需要一句CSS声明就可以实现这个效果了：

    constr {
    width: min(1024px, 100%);
}

max()

    width: max(10vw, 5em, 80px);

表示最小宽度是80px，如果浏览器视口宽度大于800px，或者文字字号大于16px，则最终的宽度值会更大。也就是说，虽然max()函数从名称上看表示最大，但是其实际作用是限制最小值

clamp()

clamp()函数的作用是返回一个区间范围的值，语法如下：

    clamp(MIN, VAL, MAX)

其中，MIN表示最小值，VAL表示首选值，MAX表示最大值。这段语句的意思是：如果VAL在MIN～MAX范围内，则使用VAL作为函数返回值；如果VAL大于MAX，则使用MAX作为返回值；如果VAL小于MIN，则使用MIN作为返回值。clamp(MIN, VAL, MAX)实际上等同于max(MIN, min(VAL, MAX))。

我们通过一个例子看一下效果：

    <button>我的宽度是？</button>
button {
    width: clamp(200px, 50vw, 600px);
}

在浏览器视口很宽的时候，按钮宽度是600px，如图4-63所示。随着浏览器视口宽度不断变小，小到宽度为646px的时候，按钮宽度变成了323px，如图4-64所示。随着浏览器视口宽度进一步变小，按钮宽度维持在200px并不再变小

CSS 进阶 ------ 常用长度单位 && 计算函数