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. Markdown · Typora | 基本画图技巧

    如果想画一些简单的状态图,可以使用 typora 自带的 mermaid 工具. (mermaid 不止能画简单的状态图,还能画流程图等,详见参考资料) 定义节点 可以定义不同形状的节点,并为节点添加 ...

  2. chatgpt 非常不稳定

      写一个飞机大战游戏       很抱歉,作为一名语言模型,我没有具体的编程功能,无法直接为您编写一个飞机大战游戏.不过,我可以为您提供一些创建飞机大战游戏的一般步骤和建议. 设计游戏元素 首先,您 ...

  3. 04-Shell字符串变量

    1. 字符串变量的三种方式 字符串(String)就是一系列字符的组合.字符串是 Shell 编程中最常用的数据类型之一(除了数字和字符串,也没有其他类型了) 单引号方式 双引号方式, 推荐 不用引号 ...

  4. 记一次MySQL5初始化被kill的问题排查

    写在前面 由于测试环境JED申请比较繁琐,所以Eone提供了单机版Mysql供用户使用,近期Eone搭建Mysql5的时候发现莫名被kill了,容器规格是4C8G,磁盘30G 这不科学,之前都是可以的 ...

  5. 13. 从零开始编写一个类nginx工具, HTTP中的压缩gzip,deflate,brotli算法

    wmproxy wmproxy将用Rust实现http/https代理, socks5代理, 反向代理, 静态文件服务器,后续将实现websocket代理, 内外网穿透等, 会将实现过程分享出来, 感 ...

  6. Godot - 创建翻译文件(常量表)

    版本 Godot 3.1.2 背景 Godot的UI系统封装的很难受, 一些东西很难改动, 比如这个AcceptDialog的"确定""取消"按钮, 特别是在编 ...

  7. Atcoder Regular Contest 166

    只打了半场. A. Replace C or Swap AB 首先如果存在某个 \(i\),使得 \(Y_i\) 是 C 且 \(X_i\) 不是,那么显然是不合法的,可以直接判掉. 那么除去上述情况 ...

  8. 【数字图像处理】Matlab实现-图像增强-灰度图像增强

    灰度图像增强的大致原理以及操作方法 面向作业编程 上图是大概对灰度图的增强处理 就是想让图片变得更好看 那么如何具体操作就看下面的代码了 这是一个简单的线性分段处理,相信在注释的帮助下应该能看懂. % ...

  9. 【matplotlib 实战】--箱型图

    箱型图(Box Plot),也称为盒须图或盒式图,1977年由美国著名统计学家约翰·图基(John Tukey)发明.是一种用作显示一组数据分布情况的统计图,因型状如箱子而得名. 它能显示出一组数据的 ...

  10. CSS必学：元素之间的空白与行内块的幽灵空白问题

    作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 WangMin 我们在开发的过程中,难免会出现一些难以预料的问题.那么其中,CSS空白现象就是非常常见的问题之一.虽 ...