CSS3新增长度单位(二)

CSS3新增长度单位

  • rem:根元素字体的倍数,只与根元素字体大小有关;
  • vw:占视口宽度的百分比;
  • vh:占视口高度的百分比;
  • vmax:占视口中宽和高最大的百分比;
  • vmin:占视口中宽和高最小的百分比。
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>CSS3新增长度单位</title>
    <style>
        .d1 {
            height: 10rem;
            width: 10rem;
            background-color: antiquewhite;
            margin: 0 auto;
            margin-top: 10px;
        }

        .d2 {
            height: 10vh;
            width: 10vw;
            background-color: greenyellow;
            margin: 0 auto;
            margin-top: 10px;
        }

        .d3 {
            height: 10vmax;
            width: 10vmin;
            background-color: rosybrown;
            margin: 0 auto;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>

</html>
相关推荐
hehelm13 分钟前
vector模拟实现
前端·javascript·算法
|晴 天|16 分钟前
[特殊字符]️ Vue 3项目架构设计:从2200行单文件到24个组件
前端·javascript·vue.js
FrontAI33 分钟前
深入浅出 LangChain —— 第三章:模型抽象层
前端·人工智能·typescript·langchain·ai agent
givemeacar39 分钟前
spring-boot-starter和spring-boot-starter-web的关联
前端
leoZ2311 小时前
金仓老旧项目改造-10
开发语言·前端·人工智能·python·金仓
接着奏乐接着舞1 小时前
react redux Toolkit 分组更推荐
前端·javascript·react.js
笨笨狗吞噬者1 小时前
uni-app 运行时揭秘:styleIsolation 的转化
前端·微信小程序·uni-app
是席木木啊2 小时前
告别console.log!Vue3项目日志框架选型指南
前端·vue3·日志框架
凰轮2 小时前
TypeScript 知识点总结
前端·javascript·typescript
英俊潇洒美少年2 小时前
告别大请求卡顿!原生 CompressionStream 实现 axios 请求体自动 Gzip 压缩(前后端全适配)
前端