当前位置: 首页 > 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/370715.html

相关文章:

  • 向harbor中上传镜像(向harbor上传image)
  • 02.02、返回倒数第 k 个节点
  • 彻底理解JVM类加载机制
  • 《汽车维修技师》是什么级别的期刊?是正规期刊吗?能评职称吗?
  • RV1126+FFMPEG推流项目(6)视频码率及其码率控制方式
  • 01.17周五F34-Day58打卡
  • 在Ubuntu(Linux)系统下安装Anaconda3
  • Kubernetes固定Pod IP和Mac地址
  • 手机号二要素核验 API 对接说明
  • 【04】RabbitMQ的集群机制
  • Ajax:表单 模板引擎
  • smuge error
  • 2025秋招八股文--服务器篇
  • 我接触csdn中的c++的时间
  • 简记Vue3(二)—— computed、watch、watchEffect
  • 【蓝桥杯选拔赛真题78】python电话号码 第十五届青少年组蓝桥杯python选拔赛真题 算法思维真题解析
  • 使用 FastGPT 工作流实现 AI 赛博算卦,一键生成卦象图
  • 【Python小游戏12——愤怒的小鸟】
  • 【MySQL】实战篇—项目需求分析:ER图的绘制与关系模型设计
  • Linux命令 用户操作简介
  • CCF A类论文复现第一天
  • App相关技术以及打包
  • 支持向量机SVM简述
  • matlab线性度计算程序
  • 计算机专业毕业生面试工具推荐:白瓜面试
  • MySQL 9从入门到性能优化-通用查询日志