px(像素)、em、% 百分比

1. em

1.1 本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。

实现段落首行缩进 24px(也就是两个字体大小的距离)

p{font-size:12px;text-indent:2em;}

1.2 但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础

html:

<p>以这个<span>例子</span>为例。</p>

CSS:

p{font-size:14px}
span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。

2. 百分比%

设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)。

p{font-size:12px;line-height:130%}

CSS - px、em、%的更多相关文章

  1. css中的px、em、rem 详解

    概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...

  2. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

  3. 你应该知道的CSS文字大小单位PX、EM、PT[转]

    摘要: 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平 ...

  4. 你应该知道的CSS文字大小单位PX、EM、PT

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用 ...

  5. CSS文字大小单位PX、EM、PT

    老是被人问到px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文 这里引用的是Jorux的"95 ...

  6. 说说css中pt、px、em、rem都扮演了什么角色

    前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...

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

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

  8. CSS文字大小单位px、em、pt详解

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  9. 详解CSS中的几种长度px、em、pt

    说说css的几种距离吧,大致有px.em.pt.pc.in.mm.cm.ex八种,其中最常见到的是px,我还见到过的有ex和mm.cm,当然后两个在当年见的更多. 其实px,我们最熟悉,而在电脑上也应 ...

  10. CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax

    本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去 ...

随机推荐

  1. BeautifulSoup的基本使用

    一.将一段文档传入BeautifulSoup的构造方法,得到一个文档的对象: from bs4 import BeautifulSoup Soup = BeautifulSoup(html_doc) ...

  2. docker映射

    端口映射 大-P对容器暴露的所有端口进行映射 小-p可以指定对哪些端口进行映射 第一种,只指定容器的端口,宿主机的端口是随机映射的 第二种,宿主机的端口和容器的端口一一对应, 第三种,只配置容器的ip ...

  3. jenkins常用

    记最精简版的启动:gradle集成springboot+vue 安装jenkins,安装待推荐插件 服务器安装gradle 服务器安装npm 配置git仓库,配置git开发者账号等 配置gradle构 ...

  4. HTML 5 视频直播一站式扫盲(转载)

    http://www.alloyteam.com/2016/05/h5-camera-literacy/

  5. 【做题笔记】洛谷P1955[NOI2015]程序自动分析

    第一道蓝题祭- 注意到本题中判断的是下标,即,并不是真的判断 \(i\) 是否等于 \(j\) 显然考虑并查集,把所有标记为"相等"的数放在一个集合里,然后最后扫一遍每个数,如果有 ...

  6. 各技能DBC参数

    推荐你  通过 引擎的帮助文件查找标准魔法DB 下面是 部分hero引擎的标准魔法DB 34,解毒术,2,26,16,0,0,0,0,0,2,42,50,44,100,46,200,40,, 35,老 ...

  7. mediasoup-demo安装记录

    环境CentOS 7 64位 VMWare12虚拟机(win10主机),安装好NodeJS 10.13(大于8.9就可以) 已按照GitHub说明拉下来代码,配置好Node环境,开始执行npm sta ...

  8. thinkphp的模型操作

    先开个坑 WHERE篇 1, 模糊查询    where['keyword'] = [ 'like' , '%test%'] 2,   不等于,大于 ,小于 EQ 等于(=)NEQ 不等于(<& ...

  9. XSS 3

    打开第三题然后会看到 然后进行一下添加数据 然后会发现数据被添加到 value=""双引号中然后然后我们会想到提前闭合 代码 然后进行编码 然后就可以通过了 此题与xss 2类似 ...

  10. C语言特点有哪些?

    C语言的特点 : 1.简洁紧凑.灵活方便 C语言一共只有32个关键字,9种控制语句,程序书写自由,主要用小写字母表示.它把高级语言的基本结构和语句与低级语言的实用性结合起来. C 语言可以象汇编语言一 ...