浅谈对px em rem的理解
px:
pc端最常用的的单位,大小固定,不会随窗口的变化而变化
例子:
.box{width:100px; height:100px; font-size: 16px; border:1px solid #000;}
设置此元素的长款各为100px(像素),边框为1px(像素) 实线 边框为黑色 元素内字体大小为 16px。
em:
em的值不固定,它会随父级元素的改变而改变(继承自父级元素)
例子:
<style>
.father{font-size:15px;}
.son{text-index:2em;}
</style>
<body>
<div class="father">
<div class="son">
这是一个段落的文字
<div>
</div>
</body>
以上代码段设置为文字缩进2em 当父类设置文字大小为15px时,实际缩进了30px(两个字符长度)。
rem:
rem是css3新加入的属性,与em的相同点是都属于相对大小值,与em的不同点是rem是相对于根元素,而em是相对于父级元素。
例子:
<style>
body{font-size:10px;}/*这里使用10px而不用我们常用的14px/16px,是因为10px相对而言比较容易计算,还原度高*/
.div1{font-size:1rem;}
.div2{font-size:2rem;}
<style>
<body>
<div class="div1">这是一段文字</div>
<div class="div2">这是另一段文字</div>
</body>
div1的字体大小为10px;
div2的字体大小为20px;
转载于:https://www.cnblogs.com/dabai-d/p/5481707.html
浅谈对px em rem的理解相关推荐
- 认识css长度单位 px % em rem vh vw
目录 长度单位 px % em rem vh.vw 总结 长度单位 在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
- px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
- html移动端怎么做城市选择,移动端页面单位的选择(px, em, rem, vw)
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
- [原创]浅谈在创业公司对PMF的理解
[原创]浅谈在创业公司对PMF的理解 在创业时,大多数人都常谈一个词叫"MVP",但PMF谈的比较少,PMF在创业公司尤为重要,以下谈谈个人一些看法. 1.什么是PMF? 创业公司 ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
- 网页布局中的 px,em,rem,pt
网页布局中的 px,em,rem,pt 设备像素:也叫物理像素,显示设备上最微小的物理部件. 比如 iphone 5:640 x 1136px. 不同的机型有不同的设备像素,固定死的. 这里需要讲一下 ...
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
- 浅谈对java编程思想的理解
浅谈对java编程思想的理解 刚从学校毕业的时候,对于这种概念的理解少之又少 ,只是单纯的从事编码工作,理解也只是停留在对java基本概念的使用上,很局限!随后工作了快三年的时间里,自己不断的理解这种 ...
最新文章
- Spring学习总结(7)——applicationContext.xml 配置文详解
- MySQL单表多字段模糊查询解决方法
- 善于使用这个filter来减少mac系统找未读邮件的烦恼
- VTK:细胞中心演示用法实战
- centos网络隔一段时间就断_计算机网络总结
- 小贝拉机器人是朋友_小朋友最爱的肉松美味来啦!咸香浓郁,肉松??控一定不要错过~...
- Java 面向对象 之 静态内部类
- JAVA 面向对象的一些基础理解
- 注释可以出现在c语言任何位置,在c程序中,注释语句只能位于一条语句的后面吗...
- Chrome 地址栏如何设置显示 http/https 和 www
- PayPal支付(Java开发)完整版
- tapestry mysql_第二十四讲:tapestry的grid组件
- 管理运筹学笔记一之图解法
- 使用树莓派PICO点灯
- C++中typedef的用法
- 查看SQLServer的定时任务中的信息
- Transformer模型是什么?带你从零详细解读Transformer模型(图解最完整版)
- css教程:可读性可维护性良好的CSS文件
- HTTP LIVE Streams
- win10安装Redis(解压版)
热门文章
- 一、scrapy爬虫框架——概念作用和工作流程 scrapy的入门使用
- LeetCode LCP 22. 黑白方格画
- LeetCode 510. 二叉搜索树中的中序后继 II(查找右子树或者祖父节点)
- Feature Engineering 特征工程 1. Baseline Model
- LeetCode 211. 添加与搜索单词 - 数据结构设计(Trie树)
- LeetCode 493. 翻转对(归并排序)
- 数据结构--链表--判断一个字符串是否为回文串(单向链表,双向链表)
- python语言的注释语句引导符_Python 为什么用 # 号作注释符?
- linux 中文 音乐播放器,linux下的常见音乐播放器
- java 以太坊 智能合约_web3j教程:java使用web3j开发以太坊智能合约交易