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>
相关推荐
有一个好名字3 分钟前
claude code安装
linux·运维·前端
BIBABULALA14 分钟前
Mini Virtual Machine — 可视化虚拟机模拟器(91行)
前端·css·css3
筱璦21 分钟前
期货软件开发「启动加载页 / 初始化窗口」
前端·c#·策略模式·期货
只与明月听28 分钟前
RAG深入学习之Emabedding
前端·python·面试
We་ct31 分钟前
React Scheduler & Lane 详解
前端·react.js·前端框架·reactjs·个人开发·任务调度·优先
kgduu1 小时前
js之json处理
前端·javascript·json
@木尘1 小时前
前端面试【 八股文篇】
前端·面试·职场和发展
吴佳浩1 小时前
OpenClaw、Claude Code 等 Agent 为什么都选择 Node.js?
前端·人工智能·langchain
小小小小宇1 小时前
React 19 useActionState 深度解析 & Vue 2.7 移植实战
前端
远山枫谷1 小时前
Vue2 vs Vue3 全面对比(含代码示例+迁移指南)
前端·vue.js