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网络编程——基于tcp协议实现远程执行命令、udp协议没有粘包问题、解决粘包问题、socketserver模块的基本使用（基于tcp协议、基于udp协议的使用）

    文章目录 基于tcp协议实现远程执行命令 udp协议没有粘包问题 解决粘包问题 解决粘包问题(终极版) socketserver模块的基本使用 基于tcp协议的使用 基于udp协议的使用 基于tcp协 ...

  2. Python基础——变量、常量、数字类型、四 列表list、五 字典dict、六 布尔bool、垃圾回收机制、用户交互、运算符、流程控制

    文章目录 变量 一 引入 一.什么是变量? 二.为什么要有变量? 三.怎么使用变量(先定义.后使用) 3.1.变量的定义与使用 3.2.变量名的命名规范 3.3.变量名的命名风格 3.4.变量值的三大 ...

  3. 深挖 Python 元组 pt.1

    哈喽大家好,我是咸鱼 好久不见甚是想念,2023 年最后一次法定节假日已经结束了,不知道各位小伙伴是不是跟咸鱼一样今天就开始"搬砖"了呢? 我们知道元组(tuple)是 Pytho ...

  4. 【Mac2021版Intel芯片下载】 - Intel芯片推荐安装

    [Mac2021版Intel芯片下载] - Intel芯片推荐安装 往下拉有安装图文教程一.下载提示1请点击图标进行下载 ●每个软件下方均标注了该软件的用途,请注意查看: ●如果点击无反应,请换一个浏 ...

  5. Python：利用math和random模块实现RSA加密算法

    实验五报告: 利用math和random模块实现RSA加密算法 实验目标 本实验的主要目标是熟悉RSA(Rivest-Shamir-Adleman)密码算法的编写,其中包括求最大公因子.模逆的扩展欧几 ...

  6. 网络层IP数据包

    网络层 功能 选择数据通过网络(IP地址)的最佳路径 协议字段 版本号(4bit):指IP协议版本.并且通信双方使用的版本必须一致,目前我们使用的是IPv4,表示为0100 十进制 是4 首部长度(4 ...

  7. Flask后端开发(一)-基础知识和前期准备

    目录 1.背景介绍 1.1. 项目背景 1.2. 项目难点 1.3. 项目环境 2. flask后端开发实现的功能 3. flask部署和前后端对接 3.1. flask运行配置和服务器部署 3.2. ...

  8. 【日常收支账本】【Day04】优化编辑动账记录的操作——QTableWidget单元格设置QComboBox控件

    一.项目地址 https://github.com/LinFeng-BingYi/DailyAccountBook 二.新增 1. 在表格中设置选项列表,让用户更快地编辑动账记录 1.1 功能详述 为 ...

  9. srm-50

    刚开始拿到题目没有思路,看了字符串发现也没什么特别的,也没有提示输入什么什么,然后找到main函数,f5进去以后也没什么特别的 然后就看了wp发现得从程序本身出发去解决问题 点开程序,随便输入点什么 ...

  10. 发现AI自我意识：不期而遇的局部技术奇点

    Q*的启示 之前的文章里提到过,人工智能思维能力创造的必不可少的条件是状态空间的搜索.今天的大新闻里,我们都看到了Q*的确使用了搜索算法.所以今天我会稍微谈一下这个话题. 主要思想就是人工智能的进一步 ...