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 分钟前
AI Agent 完整入门指南:从 LLM 到生产落地的 30+ 个核心概念
前端·后端·agent
楚宝ovo18 分钟前
新增一个 demo 子应用 - 微前端
前端
JarvanMo1 小时前
Dart 3.13:小版本,大动作
前端
纯粹的热爱1 小时前
Ubuntu 安装 Node.js 22.x(通过 NodeSource 官方源)
前端
Highcharts1 小时前
如何选择正确的图表:驱动理解和洞察力的三部分框架(第3部分)
前端·数据可视化
JavaGuide2 小时前
Github 史诗级故障,与此同时,Cursor 版「GitHub」正式上线!
前端·后端
郭邯2 小时前
用 AI 写了一个经纬度格式转换工具,从需求到落地的完整过程
前端
不一样的少年_2 小时前
修了 Bug、做了重构,为什么老板还是觉得你没产出?
前端·后端·程序员
马可家的菠萝2 小时前
Vue3 + Canvas 手绘笔记工程化实践:别把画布只当成一张 PNG
前端·vue.js·算法
IMPYLH2 小时前
HTML 的 <h1>–<h6> 元素
前端·javascript·html