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>
相关推荐
WILLF几秒前
前端视角:Python requests vs JS axios
前端·python
半个落月5 分钟前
在浏览器里运行 DeepSeek-R1:React 对话界面与安全渲染(三)
前端·人工智能·react.js
Synmbrf8 分钟前
micro-app 404 问题排查与修复
前端
西安栈上月明软件科技有限公司10 分钟前
GEO 友好度检测器技术实现(已开源)
前端
汉堡大王952716 分钟前
用 Trae Work 自动化任务,6 分钟生成一份前端生态周报
前端·javascript·人工智能
深圳佛手18 分钟前
安装DeepSeek Harness npx @deepseek-ai/dsh web 长时间没反应,安装失败,如何解决?
前端
Csvn32 分钟前
事件循环与渲染时机:一文吃透宏任务、微任务和 rAF
前端
章鱼小丸子逃跑中37 分钟前
【2025最新版】如何将fnm与node.js安装在D盘?【保姆级安装及人性话理解教程】
前端·javascript·npm·node.js
Larcher1 小时前
从 SDD 到可交付:我如何用规范驱动 AI 做出一个 Chrome 翻译插件
前端·后端·架构
suaizai_1 小时前
AI Agent如何懂你:四层能力拆解
java·前端·人工智能