Css中关于单位的一些问题

相对字体长度:

  1. Em:Em 是一个相对单位。起初排版度量时是基于当前字体大写字母”M”的尺寸的。当改变font-family时,它的尺寸不会发生改变,但在改变font-size的大小时,它的尺寸就会发生变化。 在没有任何CSS规则的前提下,1em的长度是: 1em=16px=0.17in=12pt=1pc=4.2mm=0.42cm

Em单位有点古怪,当设置了font-size属性后,它会逐级向上相乘,所以如果一个设置了font-size:1.1em的元素在另一个设置了font-size:1.1em的元素里,而这个元素又在另一个设置了font-size:1.1em的元素里,那么最后计算的结果是1.1X1.1X1.1=1.331rem(根em)。这意味着即使一个元素设置为10em,这个元素也不会在他出现的每个地方都是10em。如果font-size变化了,它可能会宽点,也可能会窄点。

  1. Rem: Rem和em一样也是一个相对单位,但是和em不同的是rem总是相对于根元素(如:root{}),而不像em一样使用级联的方式来计算尺寸。
  2. Point:  Point是一个物理度量单位,1pt=1/72 in.在CSS之外point是最常用的尺寸类型(可能这就是css支持point的原因)。它在语言里也很常见“当然他们把这个重要的信息设置成了小八号字体”。在打印样式表和物理媒介中,point是最有意义的,当然你也可以用在屏幕媒介上使用,或者其他的地方
  3. Pica:  Pica和points一样,只不过1pc=12pt。
  4. Ex:  ex是一个基于当前字体的x字母高度度量的。ex度量时有时候根据字体自身的信息,有时候由浏览器指明是通过一个小写字形来度量,最糟糕的情况是,它被设置成0.5em。它之所以被命名为“x”的高度,是因为是基于x字母的高度的。要理解x-height,想象一个小写字母,比如“d”,它会有一部分翘起,x-height是不包括翘起的这一部分的,它的高度是那个字母最下面的那一部分。和em不同,当改变font-family时em不会改变,而ex单位会变化,因为一个单位的值和那个字体是特殊的约束关系。
  5. Ch:  ch的内涵和x高度相似,只是ch是基于字符0的宽度的而不是基于字符x高度的。当font-family改变的时候ch也会随着改变。

可视区百分比长度单位

  1. Vw vw是可视区宽度单位。1vw等于可视区宽度的百分之一。vw单位跟百分比很相似,不同的是vw的值对所有的元素都一样,与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。
  2. Vh:vh和vw(viewport widht)单位一样,不同的是vh是相对于可视区的高度。
  3. Vmin:vmin的值是当前vw和vh中较小的值。在标准尺寸类型的使用实例中,和由自己确定屏幕大小的vw、vh单位相比,vmin是一个更有用的度量标准。
  4. Vmax:Vmax的值是vw和vh中的较大的值

离奇的长度单位:

百分比

以百分比为单位的长度值是基于具有相同属性的父元素的长度值。例如,如果一个元素呈现的宽度是450px,子元素的宽度设为50%,那么子元素呈现的宽度为225px。

  1. Px:像素或许被认为是最好的“设备像素”,而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。在web上,像素仍然是典型的度量单位,很多其他长度单位直接映射成像素,最终,他们被按照像素处理,javascript语言里的单位就是使用的像素。
  2. In: 英寸是一个物理度量单位,但是在CSS领域,英寸只不过被直接映射成像素罢了。
  3. Cm: 厘米。
  4. Mm: 毫米。

css中关于单位的一些问题的更多相关文章

  1. 一起来看看css中的单位

    一起来看看css中的单位 由于一直以来对于css中的百分比单位究竟是相对于谁的比例,这个问题不是很了解,所以就专门找资料看了一下. <div class="container w500 ...

  2. CSS中的单位px、em、rem、%、vw、vh、vm

    px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...

  3. 关于CSS中的单位px、em、rem

    首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸 ...

  4. css中的单位和css中的颜色表示方法

    css中颜色的表示方式: 图片来源http://www.w3school.com.cn

  5. ----关于css中常见单位----

    1.px 像素,绝对单位长度,可设定固定的长度大小.(像素是相对于显示器屏幕分辨率而言) 所有浏览器都显示为一样大小. eg: html: <p>这是一段正常段落</p> &l ...

  6. css中字体单位px,pt,em,百分比之间的区别和用法

    px 即像素,一般国内网站使用较多,默认大小是16px; pt 印刷行业常用单位 em  相对单位,相对父元素属性的单位 ,一般用于移动端布局 rem  结合相对定位和绝对定位的优势,相对根元素htm ...

  7. CSS中的那点事儿(一)--- CSS中的单位1

    单位主要用在规定元素的数值性css属性的,这里主要讨论应用的比较多的是width height  padding margin font-size,而单位中应用最广泛就是%.px.em 百分比 百分比 ...

  8. 深度解析CSS中的单位以及区别

    css中有几个不同的单位表示长度,使用时数字加单位.如果长度为0,则可以省略单位. 长度单位可分为两种类型:相对和绝对. 绝对长度 绝对长度单位是一个固定的值,反应真实的物理尺寸,不依赖于显示器.分辨 ...

  9. css中的单位

    一.相对长度单位: 相对长度是根据与其他事物的关系来度量的.共有3种相对长度单位:em,ex,px. 1个“em”定义为一种给定字体的font-size的值,例如,一个元素的font-size为14像 ...

随机推荐

  1. [python]Python代码安全分析工具(Bandit)

    简介: Bandit是一款Python源码分析框架,可用于Python代码的安全性分析.Bandit使用标准库中的ast模块,将Python源码解析成Python语法节点构成的树.Bandit允许用户 ...

  2. D - Dice Game (BFS)

    A dice is a small cube, with each side having a different number of spots on it, ranging from 1 to 6 ...

  3. 蓝桥杯第六届省赛 手链样式 STL

    小明有3颗红珊瑚,4颗白珊瑚,5颗黄玛瑙.他想用它们串成一圈作为手链,送给女朋友.现在小明想知道:如果考虑手链可以随意转动或翻转,一共可以有多少不同的组合样式呢? 分析:这个题首先一定要理解题意,转动 ...

  4. Debian Nginx 下载 .apk 文件时候报 403 错误 [1]

    一.版本介绍 Degian : 8 jessie Nginx  : 1.6.2 发生时间 : 2018-12-15 二.问题说明 客户浏览器访问Nginx的公开目录中放入了一个.apk文件,公开目录可 ...

  5. padding和margin——内边距和外边距

    一.padding——内边距(内填充) 1.1.padding 简写属性在一个声明中设置所有填充属性.该属性可以有1到4个值. <style> div.outer{ width: 400p ...

  6. C/C++与C#之间类型的对应

    最近在研究pos打印机相关功能, 调用winapi以及跨进程通信等,都涉及到类型之间的转换. C/C++ C# HANDLE, LPDWORD, LPVOID, void* IntPtr LPCTST ...

  7. SQL语句实现行转列

    最近在维护一个项目,出现了一下bug需要进行调试,于是把正式库上面的代码搬到本地库上面,数据库是本地的,跑项目的时候调试发现代码里面带有wmsys.wm_concat函数的SQL语句出现错误,经排查发 ...

  8. springboot测试的方法

    @RunWith(SpringJUnit4ClassRunner.class)@SpringBootTest( classes = {App.class})@WebAppConfigurationpu ...

  9. dockerfile语法规则

    编写Dockerfile 在前面的章节,我们学习了通过docker命令来下载镜像,运行镜像,在容器中部署自己的程序,最后将容器提交到自己的镜像中.但是,这并不是Docker推荐的镜像构建方式.在这一章 ...

  10. week2

    三元函数: a,b,c = 1,2,3 d = a if a>b else c print(d) #list 用法: lst = [1,2,3,4,5] print(lst[0:3]) prin ...