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. Python并发编程——threading、开启线程 、线程进程对比、线程方法、守护线程、GIL、同步锁、死锁和递归锁、信号量、Event、condition、定时器、queue、concurrent

    文章目录 内容回顾 一 threading模块介绍 二 开启线程的两种方式 三 在一个进程下开启多个线程与在一个进程下开启多个子进程的区别 四 练习 五 线程相关的其他方法 六 守护线程 七 Pyth ...

  2. DHorse v1.4.2 发布，基于 k8s 的发布平台

    版本说明 优化特性 在集群列表增加集群版本: 修改Jvm的GC指标名: 解决问题 解决shell脚本换行符的问题: 解决部署历史列表页,环境名展示错误的问题: 解决指标收集功能的异常: 升级指南 升级 ...

  3. MQ系列16：MQ实现消息过滤处理

    MQ系列1:消息中间件执行原理 MQ系列2:消息中间件的技术选型 MQ系列3:RocketMQ 架构分析 MQ系列4:NameServer 原理解析 MQ系列5:RocketMQ消息的发送模式 MQ系 ...

  4. 【matplotlib 实战】--气泡图

    气泡图是一种多变量的统计图表,可以看作是散点图的变形.与散点图不同的是,每一个气泡都表示三个维度的数据,除了像散点图一样有X,Y轴,气泡的大小可以表示另一个维度的数据.例如,x轴表示产品销量,y轴表示 ...

  5. P8815 [CSP-J 2022] 逻辑表达式

    Problem 考察算法:后缀表达式计算.建表达式树.\(DFS\). 题目简述 给你一个中缀表达式,其中只有 \(\&\) 和 \(\mid\) 两种运算. 求:\(\&\) 和 \ ...

  6. 字符串表达式计算(a+b/(a-b))的思路与实践

    前言 为满足业务需要,需要为项目中自定义模板添加一个计算字段的组件,通过设置字符串表达式,使用时在改变表达式其中一个字段的数据时,自动计算另外一个字段的值. 本篇为上篇,介绍原理,简单实现一个工具,输 ...

  7. Java比赛常用API总结

    1.栈和队列 1.1 栈的常用方法 //1.栈顶插入元素 push(element) //2.返回栈顶元素并弹出栈顶元素 pop() //3.返回栈顶元素但不弹出 peek() //4.清空栈 cle ...

  8. Redis 哨兵模式的原理及其搭建

    1.Redis哨兵 Redis提供了哨兵(Sentinel)机制来实现主从集群的自动故障恢复. 1.1.哨兵原理 1.1.1.集群结构和作用 哨兵的结构如图: 哨兵的作用如下: 监控:Sentinel ...

  9. SMC

    记一次入门反调试技术 找到关键函数,先分析F5伪代码,发现了virtualprotect函数,联想到了SMC代码保护技术 但是到了后面分析发现分析不下去了,然后找了wp发现是代码反调试技术 然后细细看 ...

  10. 请查收，本周刷屏的两大热点「GitHub 热点速览」

    如果你逛 HackerNews 或者是推特,你一定会被 multipleWindow3dScene 这个跨窗口渲染项目的成果刷屏,毕竟国内的技术平台上也出现了不少的模仿项目.另外一个热点,便是你在白板 ...