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. July 2023 (version 1.81)

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

  2. threading 专递类对象

    import threading class MyClass: def __init__(self, name): self.name = name def my_method(self): prin ...

  3. 给wordpress后台侧栏菜单添加自定义字段的方法

    我们在使用wordpress做网站的时候,难免有一些需要在后台设置侧栏菜单下添加自定义字段的情况.下面就简单说说一下,如何在后台设置侧栏菜单下添加自定义字段? 在这里我们主要是使用wordpress的 ...

  4. 差异行压缩算法(C#实现)

    private byte[] DifferenceRowOrder(int offset, int count, byte[] inbyte)//差异行命令(此处的offset和count都从1开始) ...

  5. P9754 [CSP-S 2023] 结构体 题解

    大模拟的话,大家应该都会,主要就是容易写挂. 操作 1 先理解什么叫做对齐规则.这点我们以样例 2 进行解释: struct a { int aa; short ab; long ac; byte a ...

  6. JavaScript用策略模式消除if else 和 switch

    js程序中最常用的if else循环,如果分枝很多的的情况下难免使写出的程序又臭又长,但是根据需求又必须将这些分支处理,此时稍有经验的程序员可能会想到用switch case优化但是只是仅仅做到利于阅 ...

  7. [Python急救站]打印菱形

    打印菱形程序 row = int(input("请输入要打印的列数: ")) #打印上面三角 for i in range(row): # i控制行数 for j in range ...

  8. CSS 选择器权重计算与优先级

    作者:WangMin 格言:努力做好自己喜欢的每一件事 在讲CSS 选择器权重计算与优先级之前,我们先来了解一下CSS是用来干什么的?CSS是用来通过添加样式使网页更加美观,也就是说CSS是利用选择器 ...

  9. Linux TTY/PTS

    转载:https://segmentfault.com/a/1190000009082089 当我们在键盘上敲下一个字母的时候,到底是怎么发送到相应的进程的呢?我们通过ps.who等命令看到的类似tt ...

  10. Flutter搭建

    目录 下载 Flutter SDK 配置 Flutter 环境变量及镜像 检查开发环境 参考 下载 Flutter SDK flutter官网下载:https://flutter.io/sdk-arc ...