css相对单位和绝对单位

2023-11-14

css长度单位分为 相对长度 和 绝对长度

1.相对长度

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设配相对长度更加适用。

单位 描述
em 它是描述相对于应用在当前元素的字体尺寸,所以它是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px
ex 依赖于英文字母小x的高度
ch 数字0的宽度
rem rem是根(root em)的缩写,相对于根元素字体大小(相对的只是HTML根元素);
vw viewpoint width,视窗宽度,1vw = 视窗宽度的1%
vh viewpoint height,视窗高度,1vh = 视窗高度的1%
vmin vw和vh中较小的一个
vmax vw和vh中较大的一个

 

2.绝对长度

绝对长度单位是一个固定的值,它反应一个真实的物理尺寸。绝对长度单位视输出介质而定,不依赖于环境(显示器、分辨率、操作系统等)

单位 描述
cm 厘米
mm 毫米
in 英寸(1in= 96px = 2.54cm)
px 像素
pt point (1pt = 1/72in)
pc pica 大约12pt(1pc = 12pt)

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css相对单位和绝对单位 的相关文章

  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • CSS 精灵按钮

    这些精灵按钮让我抓狂 我几乎可以让他们工作 但不完全是 我正在玩这个非常简单的精灵图像 我有一个 jsfiddle 项目 gt gt 这里 如果你想看的话 但如果你只想看一下 代码就在下面 http jsfiddle net jp2code
  • PDF 在 Safari 中隐藏 Jquery Modal

    这是与我有关的事情this https stackoverflow com questions 24052681 pdf hide jquery modal in ie问题 在 IE 中 我在对话框中使用 iframe 解决了问题 所以它工
  • 为什么使用 iPhone 或 iOS 设备在“iframe”中查看“position:fixed”时不起作用?

    我研究过 stackoverflow 似乎position fixed在 iOS 移动设备的 iframe 中 https stackoverflow com questions 15874910 position fixed and if
  • 从字体到跨度(大小和颜色)和背面的正则表达式(VB.NET)

    我正在寻找一个正则表达式 可以将我的字体标签 仅具有大小和颜色属性 转换为具有相关内联CSS的span标签 如果有帮助的话 这将在 VB NET 中完成 我还需要一个正则表达式来实现相反的效果 下面详细说明的是我正在寻找的转换示例 font
  • CSS使背景图像使用字体字符

    我想使用字体字符 例如来自 font awesome 作为输入元素的背景图像
  • 闪亮的应用程序包:css 和所有 www/ 目录内容

    我正在尝试将 Shiny 应用程序转换为 R 包 但我在处理有关 www 目录以及 松散 文件的所有问题时遇到了问题 我闪亮的应用程序运行得很好 但是当我尝试 打包它 时 它不起作用 我闪亮的应用程序目录 my shiny app R ut
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都
  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管
  • CSS:水平滚动时背景不存在

    好的 我的背景设置如下 HTML div div CONTENT HERE div div CSS container background url image gif content width 800px margin auto 因此
  • div 边框上的内边距

    我想在 css 边框上添加填充 将其拉入 div 内 远离边缘 使用 css 可以吗 css3 很好 webkit 这是设计 我通过将一个 div 放在一个 div 中 然后给内部 div 一个边框来做到这一点 我想让标记尽可能精简 所以如
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • 覆盖并重置 CSS 样式:auto 或 none 不起作用

    我想覆盖为所有表定义的以下 CSS 样式 table font size 12px width 100 min width 400px display inline table 我有一个特定的表 其类名为 other 最后的餐桌装饰应该是这
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • HTML 默认图像大小

    我在我的代码上显示 3 张图片 图片具有不同的尺寸 宽度和高度 div class row div class col lg 12 h2 class page header Gallery h2 div div class col md 4
  • 闪亮井板宽度

    library shiny library shinydashboard ui lt dashboardPage dashboardHeader dashboardSidebar dashboardBody wellPanel tags d

随机推荐

  • mysql查询所有分类前三的数据

    设计思路 当mysql查询有很多分类时 可能只需要每种分类的前三或者前十的数据 不需要返回所有的结果 所以我们可以给不同种类的数据添加序号 然后通过序号来筛选结果 例 建一张工人工作质量表 用年份和质量来分类 CREATE TABLE wo
  • kali如何使用中文语言包的方法

    kali linux2020 06版如何使用中文语言包 原来kali还需要使用独立的汉化包 现在中文语言包是集成在系统中的 但安装上去默认的还是英文 对于我这种英文欠佳的不太友好 于是 打开终端 输入 sudo dpkg reconfigu
  • angular2 对于DOM元素的获取与操作

    为了能够支持跨平台 angular通过抽象层封装了不同平台的差异 正确操作DOM的方式 用ElementRef和Renderer2 这篇文章将讲述如何使用Renderer2来操作DOM元素 我们可以使用Renderer2对元素的class和
  • 基于改进多目标粒子群算法的配电网储能选址定容——附Matlab代码

    目录 摘要 主要内容 程序思路 储能选址定容优化模型 1 节点电压波动 2 负荷波动 3 储能系统容量 改进的多目标粒子群算法 1 自适应权重 2 交叉变异 3 种群全局最优解的选取 算例分析及结果 本文Matlab代码分享 摘要 以系统节
  • 人工智能:分类算法——朴素贝叶斯、决策树的简单理解与代码实现,SVM、人工神经网络的简单理解

    下文使用代码 链接 pan baidu com s 1sR2bt Iu89M3h 8XMPjEuQ 提取ey3q 分类算法朴素贝叶斯 决策树 SVM 人工神经网络 汽车分类实战 一 实验目的 二 实验的硬件 软件平台 三 实验算法原理 一
  • Linux查看应用的CPU、内存使用情况

    目录 一 jps命令 二 ps命令 三 top命令 四 free命令 五 df命令 查看应用的CPU 内存使用情况 使用jps ps top free df命令查看 一 jps命令 可以列出本机所有java应用程序的进程pid jps op
  • c++11 chrono全面解析(高精度时钟,可达纳秒级别)

    1 精度 时钟节拍 时间精度 template
  • 进程池

    进程池 进程池的使用场景 当我们需要并行的处理大规模任务的时候 需要使用到多进程 多线程技术 比如说服务器处理大量客户端的任务 我在大一的时候写过一个C S mysql架构的聊天室 大概是这样处理的 每当有客户端发出连接请求时 服务器acc
  • 如何获取美团的热门商品和服务

    导语 美团是中国最大的生活服务平台之一 提供了各种各样的商品和服务 如美食 酒店 旅游 电影 娱乐等 如果你想了解美团的热门商品和服务 你可以使用爬虫技术来获取它们 本文将介绍如何使用Python和BeautifulSoup库来编写一个简单
  • 【React】Hooks入门教程(二、React最常用的四种钩子)

    这个 API 是 React 的未来 有必要深入理解 本文谈谈我的理解 简单介绍它的用法 帮助大家快速上手 阅读本文需要有 React 基础 如果你还没学会 React 可以先看一下它的教程 更新 我后来又写了一篇 轻松学会 React 钩
  • 计算机网络——7层OSI网络模型

    文章目录 OSI模型 1 应用层 2 表示层 3 会话层 4 传输层 5 网络层 6 网络链路层 7 物理层 TCP IP分层模型 1 第一层 网络接口层 和物理层 2 第二层 网间 络 层 3 第三层 传输层 4 第四层 应用层 TCP
  • xxj-job容器部署

    一 admin端命令 docker run e PARAMS spring datasource url jdbc mysql 127 0 0 1 3306 xxl job useUnicode true characterEncoding
  • ReentrantLock学习总结

    ReentrantLock锁和synchronized锁相比具有以下特点 可被中断 即可以设置 可中断锁 当t1线程获取不到锁对象处于Blocked状态时 可由另一个线程调用t1的interrupt方法将其中断 此时t1会抛出被打断异常 可
  • 使用dat.gui更改three.js中的物体变量

    一 dat gui介绍 gui是一种JavaScript库 用于创建可视化控件和调试工具 它是dat gui的简称 dat gui是一个用于在Web应用程序中创建可定制GUI的JavaScript库 它可以轻松创建滑块 复选框 颜色选择器等
  • 正点原子IMXU开发板Qt开发环境搭建及测试

    Qt交叉编译器的安装 第一步 安装Qt开发使用的交叉编译器 位于 开发光盘A 基础资料 5 开发工具 交叉编译器 第二步 使用FileZilla Client将交叉编译器传输到Ubuntu中 第三步 在Ubuntu中给传输过去的交叉编译器可
  • mysql判断时间是否在当前时间内_判断当前时间是否在某时间段内

    public static booleantimeQuantum String stTime String edTime Calendar cal Calendar getInstance 获得一个日历 SimpleDateFormat s
  • [学习笔记]Linux + Nginx环境下部署 Web 站点

    部署后端程序 请阅读 学习笔记 Linux环境下部署 Net5 程序 林晓lx的博客 打包项目 以Vue项目为例 首先打包站点 前往项目的根目录并键入 yarn build 等待打包结束 成功后将在根目录下生成dist文件夹 用Zip压缩d
  • 信息学奥赛一本通C++语言——1139:整理药名

    题目描述 医生在书写药品名的时候经常不注意大小写 格式比较混乱 现要求你写一个程序将医生书写混乱的药品名整理成统一规范的格式 即药品名的第一个字符如果是字母要大写 其他字母小写 如将ASPIRIN aspirin整理成Aspirin 输入
  • 子网掩码详解

    一 子网掩码的概念及作用 子网掩码 subnet mask 又叫网络掩码 地址掩码 子网络遮罩 是一个应用于 TCP IP 网络的 32 位二进制值 它可以屏蔽掉 IP 地址中的一部分 从而分离出 IP 地址中的网络部分与主机部分 基于子网
  • css相对单位和绝对单位

    css长度单位分为 相对长度 和 绝对长度 1 相对长度 相对长度单位指定了一个长度相对于另一个长度的属性 对于不同的设配相对长度更加适用 单位 描述 em 它是描述相对于应用在当前元素的字体尺寸 所以它是相对长度单位 一般浏览器字体大小默