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

CSS 基础 4 - CSS 常用单位的更多相关文章

  1. 日常用的css基础和自己常用的js封装

    css基础:base /* * 初始化 */ *::after, *::before { box-sizing: border-box; } body { font-family: 'Microsof ...

  2. CSS之常见布局|常用单位|水平垂直居中

    常见布局: 1. 流式布局:百分比布局,宽高.margin.pinding都是百分比 2. 固定布局:盒子的宽高固定,如:margin.padding等 3. 浮动布局:float 4. 弹性布局:f ...

  3. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  4. Html+CSS基础之CSS样式

    认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ fo ...

  5. 一、HTML和CSS基础--HTML+CSS基础课程--第2部分

    第三章 与浏览器交互,表单标签 使用表单标签,与用户交互
网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的 ...

  6. 一、HTML和CSS基础--HTML+CSS基础课程--第6部分

    第十一章 CSS代码缩写,占用更少的带宽 盒模型代码简写
:还记得在讲盒模型时外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上 ...

  7. 一、HTML和CSS基础--HTML+CSS基础课程--第5部分

    第九章 CSS盒模型 元素分类
: 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的 ...

  8. Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

    1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...

  9. 一、HTML和CSS基础--HTML+CSS基础课程--第4部分

    第七章 CSS的继承.层叠和特殊性 继承:CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 特殊性
权值的规则: 标签 ...

  10. 一、HTML和CSS基础--HTML+CSS基础课程--第3部分

    第五章 CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式cs ...

随机推荐

  1. 低代码平台如何借助Nginx实现网关服务

    摘要:本文由葡萄城技术团队于博客园原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 前言 在典型的系统部署架构中,应用服务器是一种软件或硬件系统, ...

  2. Xshell链接不上解决问题

    #5.远程连接工具排错? #一.测试网络是否通畅 1.测试网络连通性:ping 服务端ip地址 2.关闭防火墙 systemctl stop firewalld #关闭防火墙 systemctl di ...

  3. replace批量替换、表删除数据查询用法

    一. select * from baec_file where bacti='1'order by baec01; select baec02,REPLACE(baec02,'白班','A班') f ...

  4. MySQL的驱动表与被驱动表

    驱动表与被驱动表的含义 在MySQL中进行多表联合查询时,MySQL会通过驱动表的结果集作为基础数据,在被驱动表中匹配对应的数据,匹配成功合并后的临时表再作为驱动表或被驱动表继续与第三张表进行匹配合并 ...

  5. PHP-FFMpeg 操作音视频

    目录 安装PHP-FFMpeg 视频中提取一张图片 视频中提取多张图片 调整视频大小 视频添加水印 生成音频波形 音频转换 给音频添加元数据 拼接多个音视频 截取音视频 提取 gif 动图 裁剪视频 ...

  6. C#基数排序算法

    前言 基数排序是一种非比较性排序算法,它通过将待排序的数据拆分成多个数字位进行排序. 实现原理 首先找出待排序数组中的最大值,并确定排序的位数. 从最低位(个位)开始,按照个位数的大小进行桶排序,将元 ...

  7. RLChina2022-实践课三：强化学习算法

    MDP算法 MDP被定义为一个元组(S,A,P,r,R) S:所有状态集合 A:在环境力里面智能体所作动作的集合 P:状态转移函数P(s'|s,a),智能体在当前s下,执行a之后,转移到是s'的概率 ...

  8. 《流畅的Python》 读书笔记 第7章_函数装饰器和闭包

    第7章 函数装饰器和闭包 装饰器这个名称可能更适合在编译器领域使用,因为它会遍历并注解句法树 函数装饰器用于在源码中"标记"函数,以某种方式增强函数的行为.这是一项强大的功能,但是 ...

  9. STM32CUBEIDE 如何将变量定义到指定内存地址

    使用场景如下: 我需要将bootloader/APP的版本号和一些字段信息定义到指定FLASH地址. 在STM32CubeIDE中的方法: 截止当前STM32CubeIDE还没有提供图形化的针对FLA ...

  10. AndroGenshin

    是一个apk文件 jadx打开以后发现主要操作 找到mainactivity,研究代码可以知道主要操作就是对两个字符串进行RC4加密再进行一次换表的base64操作,最后再将加密后的结果与flag做对 ...