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 分钟前
P12 | 标签体系:灵活的多维标签设计与前端联动
前端
小李子呢021127 分钟前
前端八股浏览器网络(2)---cookie,localStorage,sessionStorage
前端·网络
小李子呢021132 分钟前
前端八股Vue---插槽
前端·javascript·vue.js
学习使我健康37 分钟前
Android 事件分发机制
android·java·前端
众少成多积小致巨43 分钟前
libbinder_ndk 入门指南
前端·c++·架构
小李子呢021144 分钟前
前端八股Vue---自定义组件(控件)
前端·javascript·vue.js
用户52709648744901 小时前
微前端(qiankun)单侧启动调试技巧
前端
斌味代码1 小时前
jQuery 内存泄漏排查:常见场景、工具使用与修复实战
前端·javascript·jquery
weixin199701080161 小时前
《爱回收商品详情页前端性能优化实战》
前端·性能优化
chenbin___1 小时前
鸿蒙(HarmonyOS)支持 useNativeDriver的详细说明(转自千问)
前端·javascript·react native·react.js·harmonyos