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. 深入理解java和dubbo的SPI机制

    1 SPI简介 1.1 SPI(Service Provider Interface) 本质:将接口实现类的全限定名配置在文件中,并由服务加载器读取配置文件,加载实现类.这样可以在运行时,动态为接口替 ...

  2. July 2023 (version 1.81)

    July 2023 (version 1.81) 更新后显示发行说明 Update 1.81.1: The update addresses these issues. Welcome to the ...

  3. Redis 6 学习笔记 3 —— 用SpringBoot整合Redis的踩坑，了解事务、乐观锁、悲观锁

    SpringBoot整合Redis时踩到的坑 jdk1.8环境,用idea的Spring Initializr创建spring boot项目,版本我选的2.7.6.pom文件添加的依赖如下,仅供参考. ...

  4. Ubuntu18.04环境下安装redis 6.2.0，配置文件的部分参数说明

    环境是win11的Linux子系统Ubuntu-18.04,安装方式是源码安装,也可以用apt安装(见本文最后参考资料),用的用户是默认用户(所以一些关键命令要注意用sudo,不用会报错) 安装: j ...

  5. Windows没有足够信息，不能验证该证书"，是因为该证书的颁发者

    Windows没有足够信息,不能验证该证书",无法验证该证书的颁发者 解决方案之一: 1.win+R:打开运行 2.输入 gpedit.msc,确定,打开组策略 3.选择:计算机配置---管 ...

  6. [C++]P3379 LCA 最近公共祖先

    最近公共祖先 LCA 倍增写法 LCA的倍增主要由三个重要的过程组成 预处理lg数组 DFS求fa depth 倍增节点 观看以下内容前建议先把完整代码大致纵览一遍,有利于理解各个函数的意义 倍增思想 ...

  7. 微信开放平台微信公众平台微信小程序openid合法性验证

    我们获得了微信用户的openid,往往要把openid保存到服务器中的数据库里.有些场景需要检验openid的合法性,官方给了相应的验证接口如下: https://api.weixin.qq.com/ ...

  8. 基于FFmpeg和Qt实现简易视频播放器

    VideoPlay001 记得一键三连哦 使用qt+ffmpeg开发简单的视频播放器,无声音 视频解码使用的是软解码即只用CPU进行QPainter绘制每一帧图像,CPU占用过高 简单易学,适合小白入 ...

  9. Modbus转PROFINET网关 TS-180

    TS-180实现 PROFINET 网络与串口网络之间的数据通信.三串口可分别连接具有 RS232 或 RS485 接口的设备到PROFINET 网络,三串口相同,全为 RS232 或RS485.即将 ...

  10. 数据集成平台关于【源平台调度&任务生命周期】

    任务调度者 调度事件 生产任务 调度任务池-异步
AsynDispatcher --source 实例化适配器执行 消费任务 实例化集成应用 DataHub Instance
handleSource ...