当前位置: 首页 > article >正文

CSS3新增长度单位(二)

CSS3新增长度单位

  • rem:根元素字体的倍数,只与根元素字体大小有关;
  • vw:占视口宽度的百分比;
  • vh:占视口高度的百分比;
  • vmax:占视口中宽和高最大的百分比;
  • vmin:占视口中宽和高最小的百分比。
<!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>

http://www.kler.cn/a/375086.html

相关文章:

  • 硅谷甄选(11)角色管理
  • Scrapy源码解析:DownloadHandlers设计与解析
  • 安科瑞AMB400分布式光纤测温系统解决方案--远程监控、预警,预防电气火灾
  • Django数据模型on_delete属性值
  • 从0开始的STM32学习之旅:使用中断完成等待型任务(理论部分)
  • 后端开发中的分层思想,DAO、Service、Controller、Mapper,VO、DTO、DO、PO每层的作用及调用关系
  • 从比亚迪超越特斯拉,看颠覆全球市场的中国力量
  • 大语言模型微调方法详解【全量微调、PEFT、LoRA、Adapter】
  • Rust 力扣 - 2090. 半径为 k 的子数组平均值
  • 低压电容补偿不用时会有电流损耗吗?
  • Lampiao靶机入侵实战
  • 计算机考研,选择西安交通大学还是哈工大?
  • 吞吐量最高飙升20倍!破解强化学习训练部署难题
  • Java解析word中的表格或者文本
  • SpringBoot学生请假系统:设计与实现全攻略
  • YOLO11改进-模块-引入基于部分卷积的前馈网络PCFN
  • 第十七届山东省职业院校技能大赛通知分享
  • 算法有哪些
  • 人工智能入门要学习多久?
  • WebMvcConfigurationSupport和WebMvcConfigure
  • 中国人工智能产业发展联盟发布《基于大模型的数字人系统技术要求》
  • .NET 8 Web API 中的身份验证和授权
  • 阿里巴巴参数获取API
  • 实现企业微信打卡月报与简道云的高效集成
  • QT项目-仿QQ聊天(带宠物系统)
  • (五)Spark大数据开发实战:灵活运用PySpark常用DataFrame API