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. 原创基于Scrum框架产研团队运作20问

    学习完了 Scrum,实际使用中,是否遇到/思考过下面的问题? Product Owner的老板是谁.谁来给 Product Owner打绩效.考核的标准是啥? Scrum Master 的老板是谁. ...

  2. [SWPUCTF 2021 新生赛]sql

    看到网站上写着参数是wllm,就用wllm=1试了一下,发现是SQL注入 查找字段数时,提示请勿非法操作 说明空格出现过滤,可以用/**/绕过 http://1.14.71.254:28347/?wl ...

  3. C#学习笔记--进阶

    C#进阶 简单数据结构类 ArrayList 元素类型以Object类型存储,支持增删查改的数组容器. 因而存在装箱拆箱操作,谨慎使用. //ArrayList ArrayList array=new ...

  4. 【虹科干货】Redis 开发者需要了解的缓存驱逐策略

    在你搭建并配置了一个Redis数据库之后,Redis成功地提升了应用程序性能.然而这里有一个潜在问题,随着缓存数据的快速增加和内存占用率的逐渐上升,你很快会发现Redis缓存容量即将达到硬件存储容量上 ...

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

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

  6. 搞懂Event Loop

    本文关键: V8是单线程的 任务队列排队执行 抽出io命令抽出到evenloop线程,消息线程,区别与主线程.(同步和异步) 微任务和宏任务执行顺序 重绘和回流 以上流程无限循环 可以这样理解,一个人 ...

  7. InfiniBand 的前世今生

    今年,以 ChatGPT 为代表的 AI 大模型强势崛起,而 ChatGPT 所使用的网络,正是 InfiniBand,这也让 InfiniBand 大火了起来.那么,到底什么是 InfiniBand ...

  8. 文心一言 VS 讯飞星火 VS chatgpt （128）-- 算法导论11.1 3题

    三.用go语言,试说明如何实现一个直接寻址表,表中各元素的关键字不必都不相同,且各元素可以有卫星数据.所有三种字典操作(INSERT.DELETE和SEARCH)的运行时间应为O(1)(不要忘记 DE ...

  9. Kubernetes: kube-apiserver 之认证

    kubernetes:kube-apiserver 系列文章: Kubernetes:kube-apiserver 之 scheme(一) Kubernetes:kube-apiserver 之 sc ...

  10. 请问您今天要来点 ODT 吗

    梗出处:请问您今天要来点兔子吗? 这篇文章主要记录一下自己学习 \(\text{ODT}\) 发生的种种. CF896C Willem, Chtholly and Seniorious \(\text ...