CSS - px、em、%
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、%的更多相关文章
- css中的px、em、rem 详解
概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...
- html,CSS文字大小单位px、em、pt的关系换算
html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...
- 你应该知道的CSS文字大小单位PX、EM、PT[转]
摘要: 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平 ...
- 你应该知道的CSS文字大小单位PX、EM、PT
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用 ...
- CSS文字大小单位PX、EM、PT
老是被人问到px.pt和em的区别,自己有时候也会纠结到底该用什么单位,今天特意查了一些文章,下面这篇虽然很久远了,但解释的比较全面,转载收藏之.点击查看原文 这里引用的是Jorux的"95 ...
- 说说css中pt、px、em、rem都扮演了什么角色
前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...
- CSS中的单位px、em、rem、%、vw、vh、vm
px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...
- CSS文字大小单位px、em、pt详解
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
- 详解CSS中的几种长度px、em、pt
说说css的几种距离吧,大致有px.em.pt.pc.in.mm.cm.ex八种,其中最常见到的是px,我还见到过的有ex和mm.cm,当然后两个在当年见的更多. 其实px,我们最熟悉,而在电脑上也应 ...
- CSS各种度量单位----px、em、%、rem、vh/vw、vmin/vmax
本文主要讲下CSS中各类度量单位的意思和区别. 开发中最常用到的css单位是px.em.%.随着css3的出现,带来了更多的度量单位,这些单位为响应式开发,带来很大的好处.各种单位的浏览器兼容性可以去 ...
随机推荐
- 关于jquery ajax不执行success回调函数
检查error函数是否执行,发现错误信息为parseerror,表示jquery解析返回结果时失败,只需要将ajax参数dataType:"json"改为"text js ...
- 什么是类的hashcode值
1.要知道什么是类的hashcode值,首要要了解什么是hash(哈希).Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入(又叫做预映射pre-image)通过散列算法变换 ...
- pikachu练习平台(XSS-漏洞测试案例(cookie的窃取和利用、钓鱼攻击、XSS获取键盘记录))
XSS-漏洞测试案例 xss案例 1.cookie的窃取和利用 2.钓鱼攻击 3.XSS获取键盘记录 在进行案例之前首先要搭建xss后台 搭建xss后台 1.在pikachu文件夹下面,把pkxss单 ...
- php设计模式之多态实例代码
<?php header("Content-type:text/html;charset=utf-8"); /** * 虎 */ abstract class Tiger { ...
- Flink流处理(一)- 状态流处理简介
1. Flink 简介 Flink 是一个分布式流处理器,提供直观且易于使用的API,以供实现有状态的流处理应用.它能够以fault-tolerant的方式高效地运行在大规模系统中. 流处理技术在当今 ...
- Redis02——安装Redis
1.下载获得redis-3.2.5.tar.gz后将它放入我们的Linux目录/opt 2.解压命令:tar -zxvf redis-3.2.5.tar.gz 3.解压完成后进入目录:cd redis ...
- JSP中四大作用域详解
四大作用域 为了在页面.请求.和用户之间传递和共享数据,JSP提供了四个不同的作用域:page(页面作用域).request(请求作用域).session(会话作用域).application(应用程 ...
- Scanner的hasNext()方法
转自:https://blog.csdn.net/gao_zhennan/article/details/80562548 找到一篇关于hasNext()的常见问题的文章,记录一下
- casperJs的安装2
通过上面一节,以为能够顺利安装好phantom 没想到,根本没成功. 接着,通过github上下载项目,重新安装: 1.clone项目:[https://github.com/ariya/phanto ...
- tomcat在win10系统中安装失败的问题,修改tomcat内存
自己以前在其他系统上安装tomcat服务都没有问题,但是在win10系统上安装就经常出现问题,自己总结了一下安装步骤: 1.首先需要配置环境变量, CATALINA_HOME 2.修改service. ...