首页 > 其他分享 >CSS 基础 4 - CSS 常用单位

CSS 基础 4 - CSS 常用单位

时间:2023-09-28 21:01:43浏览次数:33  
标签:em 常用 height 单位 width 累乘 100vh CSS

CSS 基础 4 - CSS 常用单位

  • px:基础单位
  • em:相对当前父容器的系数,可以累乘
  • rem:相对根 <html> 的系数,方便计算
  • vw/vh:viewport width/height,整个浏览器的大小,取值范围 1-100
    • 如 100vh,占满高度,如果出现滚动条,是因为 body 预设的 padding 和 margin
    • 如 30% 宽度的侧边栏: height:100vh;width:30vw;
  • vmin/vmax:屏幕短边/长边,取值范围 1-100,配合 MediaQuery,用于响应式布局、手机旋转场景
    • 如 100vmin,占满短边

em 累乘效果

Reference

https://www.bilibili.com/video/BV1d441167e9

标签:em,常用,height,单位,width,累乘,100vh,CSS
From: https://www.cnblogs.com/tengzijian/p/17736477.html

相关文章

  • CSS 基础 3 - 定位 Postion 属性
    CSS基础3-定位Postion属性staticposition属性的默认值,元素随HTML流移动top/left/right/bottom属性无效relative和static类似,元素随HTML流移动。区别:比static多了top/left/right/bottom(设定偏移量)【父相子绝】【可以作为父元素,让内部的absolute元素根......
  • 盒子模型-CSS
    /*内边距/padding:20px;/边框/border:20pxsolidblack;/外边距*/margin:50px;/*实线//border:10pxsolid#000;//虚线//border:10pxdashed#000;//点线*/border:10pxdotted#000;/*上下左右*/border-top:10px......
  • 人工智能,常用AI工具
    人工智能,常用AI工具(人工智能常用工具)1.GitHub --> Copilot: Copilot是微软在Windows11中加入的AI助手,该AI助手是一个集成了在操作系统中的侧边栏工具,可以帮助用户完成各种任务。用于协助编程序2.飞书:飞书文档作为新一代高效协作工具,融合了在线文档和协同文档的所有功能,......
  • IDEA常用快捷键
    Alt+Home:查看类的结构信息;Alt+Enter:补全new对象;Alt+Insert:获取get与set方法;Alt+7:在窗口显示当前类的结构(所有方法);Ctrl +F12以弹窗列出该类所有的方法定义;Ctr|+Alt+V:接收调用方法的返回值(调用方法的时候,如果方法有明确的返回值,我们用变量接收可以手动完......
  • oracle常用命令
    目录一、基础增删改查1.解锁用户2.修改用户密码3.查看所有用户的缺省表空间4.查看表空间路径,名称,大小5.查看数据库大小6.查询数据库连接数-总数7.查询数据库连接数-详细连接数8.查询字符集9.数据库启停10.修改密码过期时间11.通过表名-->找用户12.性能排查sql  a.查看耗时SQL;b.......
  • 几种常用的日志管理系统
    日志管理系统是用于收集、存储、分析和可视化日志数据的工具,用于监控和维护应用程序和系统的运行状况。以下是几种常用的日志管理系统:ELKStack(Elasticsearch、Logstash、Kibana):ELKStack是一个流行的开源日志管理解决方案,它包括Elasticsearch用于存储和搜索日志数据,Logstash用......
  • sass_scss_less
    title:Sass(Scss)、Less的区别与选择+基本使用tags:[CSS,Sass,Scss,Less]categories:可回收物keywords:css,sass,scss,lessdescription:Sass(Scss)、Less的区别与选择+基本使用date:2020-12-3112:20:31{%noteinfono-icon%}Sass(Scss)、Less都是CSS预处......
  • Flash中fscommand中常用参数
    用法fscommand("command","parameters")参数command一个传递给宿主应用程序用于任何用途的字符串;或者一个传递给FlashPlayer的命令。parameters一个传递给宿主应用程序用于任何用途的字符串;或者一个传递给FlashPlayer的值。返回无。说明函数;使S......
  • mac中wps常用快捷键
    mac中wps常用快捷键一、文字处理快捷键1、command+N  新建文档2、command+O  打开文档  3、command+S  保存文档4、command+W  关闭文档5、command+Z  撤销  6、shift+command+N  重做 二、样式格式快捷键1、command+B  ......
  • 巧用CSS的Border属性
    制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助。我们先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD、DIV等等)画边框,它可以定义边框线的类型、宽度和颜色,利用这个特性,可以制作一些特殊效果。下面将通过实例来说明其应......