CSS中的长度单位

最新推荐文章于 2023-12-11 19:14:43 发布

命中。

最新推荐文章于 2023-12-11 19:14:43 发布

阅读量494

点赞数

分类专栏： CSS 文章标签： css javascript 前端

本文链接：https://blog.csdn.net/YANGMENGZHENG/article/details/120985033

版权

CSS 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

一、长度单位

CSS 单位

CSS 有几种表示长度的不同单位。

许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等。

长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。

数字和单位之间不能出现空格。但是，如果值为 0，则可以省略单位。

二、绝对长度

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。

单位	描述
cm	厘米
mm	毫米
in	英寸 (1in = 96px = 2.54cm)
px *	像素 (1px = 1/96th in)
pt	点 (1pt = 1/72 in)
pc	派卡 (1pc = 12 pt)

三、相对长度

相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。

1、单位描述

单位	描述
em	相对于当前对象内文本的字体大小（font-size）（2em 表示当前字体大小的 2 倍）任意浏览器默认的相对字体高度为16em
ex	相对于当前字体的 x-height(极少使用)
ch	相对于 "0"（零）的宽度
rem	相对于根元素的字体大小（font-size）
vw	视窗单位，视窗宽度的百分比，1vw相对于视口*宽度的 1%
vh	视窗单位，视窗高度的百分比，1vh相对于视口*高度的 1%
vmin	视窗单位，表示vw、vh中的较小的一个值，相对于视口*较小尺寸的 1％
vmax	视窗单位，表示vm、vh中的较大的一个值，相对于视口*较大尺寸的 1％
%	相对于父元素

* 视口（Viewport）= 浏览器窗口的尺寸。如果视口为 50 厘米宽，则 1vw = 0.5 厘米

2、vw、vh和%的区别

       A、%是相对于父元素的大小而设定的比例,vw、wh是由视窗的大小来决定。

       B、vw、vh可以直接获取视窗的宽度或高度,%在设置时要根据body的高度的情况，往往无法正确的获取实际宽度或高度。

3、vmin、vmax的用处

在开发移动页面时，使用vw、wh来设置字体的大小，在竖屏、横屏状态下显示的字体大小不一样。由于vmin、vmain是当前较小或较大的，用来设置字体可以保证在竖屏、横屏状态下字体大小一样。

四、长度单位练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长度单位的使用</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        border: 0;
    }
    .demo1{
        width: 100vw;
        font-size:5vw ;
        margin: 0 auto;
        background-color: lawngreen;
        color: lightgoldenrodyellow;
    }
    .demo2{
        width: 80vw;
        font-size:5vw ;
        margin: 0 auto;
        background-color:blue;
        color: yellow;
    }
    .demo3{
        width: 50vw;
        height: 50vh;
        font-size:1vw ;
        margin: 0 auto;
        background-color: red;
        color: grey;
    }
</style>
<body>
    <div class="demo1">
        <h1>宽度100%，字体5%</h1>
    </div>
    <div>
        <h2 class="demo2">宽度80%，字体5%</h2>
    </div>
    <div>
        <h3 class="demo3">宽度50%，高度50%，字体1%</h3>
    </div>
</body>
</html>

命中。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的长度单位

目录一、长度单位 CSS 单位二、绝对长度三、相对长度 1、单位描述 2、vw、vh和%的区别 3、vmin、vmax的用处一、长度单位CSS 单位CSS 有几种表示长度的不同单位。许多 CSS 属性接受“长度”值，诸如width、margin、padding、font-size等。长度是一个后面跟着长度单位的数字，诸如10px、2em...
复制链接

扫一扫