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>
相关推荐
凌云拓界9 小时前
前端开发的“平衡木”:在取舍之间找到最优解
前端·性能优化·架构·前端框架·代码规范·设计规范
zhengfei6119 小时前
【XSS payload 】一个经典的XSS payload
前端·xss
全栈老石10 小时前
手写一个无限画布 #1:坐标系的谎言
前端·canvas
XW010599911 小时前
4-11判断素数
前端·python·算法·素数
J2虾虾11 小时前
Spring Boot中使用@Scheduled做定时任务
java·前端·spring boot
Heo11 小时前
深入React19任务调度器Scheduler
前端·javascript·面试
一枚前端小姐姐11 小时前
Vue3 + Pinia 状态管理,从入门到模块化
前端·vue.js
用户144361834009711 小时前
你不知道的JS上-(九)
前端·javascript
yuki_uix11 小时前
为什么我的 Auth Token 藏在了 Network 面板的 Doc 里?
前端·python·debug
不会敲代码111 小时前
从原子CSS到TailwindCSS:现代前端样式解决方案全解析
前端·css·react.js