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>
相关推荐
Yao8064 分钟前
MinIO自建对象存储,省OSS费用的完整方案
前端·后端
2501_9339232512 分钟前
设计网页的时候加载不出来怎么办?认识常见的状态码
前端·spring
only-lucky19 分钟前
QML深入学习五(Controls模块)
前端·javascript·学习
程序员黑豆28 分钟前
鸿蒙应用开发之路由:Router 页面路由使用教程
前端·harmonyos
gyx_这个杀手不太冷静43 分钟前
Agent开发进阶指南(第 2 章):Agent 运行全流程拆解、上下文窗口、流式输出、记忆系统与 Function Call 实战
前端·架构·agent
anyup43 分钟前
像这种问题千万别自己动手,否则你可太看不起 AI 了
前端·架构·trae
hunterandroid1 小时前
[鸿蒙从零到一] HarmonyOS Web 组件与 JSBridge 通信实战:从页面加载到安全协议
前端
xingren2 小时前
「拍摄器」UI 特效 - 在 Winform/WPF/WinUI3/Avalonia/Web 的实现
前端
leslie1182 小时前
npm常用命令
前端·npm
艾伦野鸽ggg2 小时前
axios 基本操作
前端