css 常用单位
em:
相对于应用在当前元素的字体尺寸,1em 等于当前的字体尺寸,2em 等于当前字体尺寸的两倍,一般浏览器字体大小默认为16px,则2em == 32px;
W3原文:font size of the element;Equal to the computed value of the font-size property of the element on which it is used.
ex:
一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
W3原文:x-height of the element’s font;Equal to the used x-height of the first available font [CSS3-FONTS]. The x-height is so called because it is often equal to the height of the lowercase "x". However, an ex is defined even for fonts that do not contain an "x". The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristic is to look at how far the glyph for the lowercase "o" extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em must be assumed.
rem:
根元素(html)的 font-size.
W3原文:font size of the root element,Equal to the computed value of font-size on the root element.
If used in the font-size property of the root element, or in a document with no root element, 1rem is equal to the initial value of the font-size property.
ch:
数字 0 的宽度;
W3原文:Equal to the used advance measure of the "0" (ZERO, U+0030) glyph found in the font used to render it. (The advance measure of a glyph is its advance width or height, whichever is in the inline axis of the element.)


%:
A keyword matching one of the <length>, <angle>, <time>, or <frequency> units The attribute value must parse as a <number-token>, and is interpreted as a dimension with the specified unit. The default is 0 in the relevant units, or else the property’s minimum value if 0 in the relevant units is not valid for the property. The default must also be used if the property in question only accepts values within a certain range (e.g. positive lengths or angles from 0 to 90deg) and the attribute is out of range (e.g. a negative length or 180deg). If the unit is a relative length, it must be computed to an absolute length.
fr:
fr (fraction)单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。
数据来源:https://www.w3.org/TR/2018/CR-css-values-3-20180814/#intro
css 常用单位的更多相关文章
- css常用单位
css常用单位 本文来简单介绍下css的常用单位. 绝对长度单位 绝对长度单位代表一个物理测量. 像素px(pixels) 在web上,像素px是典型的度量单位,很多其他长度单位直接映射成像素.最终, ...
- CSS的常用单位 %和 vw vh 和 box-sizing:border-box; 和flex简介
一.% 理解: %号是CSS中的常用单位,它是相对于父容器而言的.如:一个父容器的宽是100px,给它的子元素一个10%,那么子元素的宽就是100px的10% 10px. 效果图: (利用%设置了li ...
- CSS之常见布局|常用单位|水平垂直居中
常见布局: 1. 流式布局:百分比布局,宽高.margin.pinding都是百分比 2. 固定布局:盒子的宽高固定,如:margin.padding等 3. 浮动布局:float 4. 弹性布局:f ...
- CSS常用样式(四)之animation
上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...
- css常用文本属性
[CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...
- css常用样式属性详细介绍
对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- HTML、CSS常用技巧
一.HTML 在介绍HTML之前,我们先看一下HTML的文档树结构,主要包括哪些: (一).头部标签 1,Doctype Doctype告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档 ...
- HTML+CSS常用代码(笔记)
注释标签:对代码进行说明 <!-- 单行注释,也可以对多行文字进行注释 --> 常用格式标签 <b>加粗</b> <i>斜体</i> < ...
随机推荐
- Vue之组件使用(二)
补充一下:之前没提到,这里是一个父子组件通信的方法 如果想要使同一个组件实现不同的效果,那么可以这样做. 把需要封装的组件模板写在template中 <template id="cou ...
- cakephp搭建配置完成后怎么关闭cake标识
在新搭建好cakephp矿建时,准备开发的时候我们会发现页面上有cakephp的标识,影响美观,和开发任务.那么怎么去掉呢? 1.找到FrontDesk\app\View\Layouts\defaul ...
- [SDOI2010]猪国杀
题面 (这个做题面的大佬太赞啦) 无聊啊~~~然后就写大模拟,然后就从早上写到下午,生活得到了极大的充实 注意事项: 牌库为空之后再抽牌,会重复抽最后一张被抽走牌 无论在任何过程中,游戏结束(主公死或 ...
- 【读书笔记】iOS-网络-运行循环
运行循环是由类NSRunLoop表示的,有些线程可以让操作系统唤醒睡眠的线程以管理到来的事件,而运行循环则是这些线程的基本组件.运行循环是这样一种循环,可以在一个周期内调度任务并处理到来的事件.iOS ...
- HTML/CSS学习(二)
续...... ============================================================================================ ...
- vuex 管理vue-router的传值
假设有这样的一种情况,在两个组件中.一个组件[A]主要是比如说放表格数据,而另外一个组件[B]是专门用来向组件A的表格添加数据的表单.这个时候就是两个兄弟组件之间传递数据了.首先想到的是使用兄弟组件传 ...
- JS--我发现,原来你是这样的JS(二)(基础概念--躯壳篇--不妨从中文角度看js)
一.介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第二篇(基础概念--躯壳篇),有着部分第三章的知识内容,当然其中还有我个人的理解. 红宝书这本书可以说是难啃的,要看完不容易,挺 ...
- 转型、自助、移动—BI市场的应用盘点
近几年是数据应用快速增长而又动荡的一年.由于投资热带来的一波2B产业高潮,围绕数据业务的产品层出不穷,无论是通用型的可视化工具,还是带有业务属性的分析产品. 商业智能BI作为一个曾经先于大数据的企业数 ...
- 如何使用Ubuntu中的avdManager命令行为“System-Image;Androd-27;GoogleAPI;x86”创建一个AVD?
命令是正确的,但问题是在你的系统中,你没有“android-27”操作系统. 请检查你的系统中有哪个操作系统,进入下面的目录 目录路径:-~\Android\SDK\Platform 如果没有,请先下 ...
- python appium笔记(一):appium android环境配置及示例
(一) 简介 Appium是一个开源的自动化测试框架,可以用来测试基于iOS.Android和Firefox OS平台的原生和混合应用.该框架使用Selenium Webdriver,在执行测试时和 ...