em表示什么长度单位_使用相对长度单位em布局网页内容
顺便问一下哈？那个辣椒酱大家感觉怎么样，你们也买了也尝了，是不是该反馈反馈啦~~如果还有想要的，可以联系我呐！原文地址：自从有了这款辣椒酱，拌饭再也不用老干妈
前言：在页面开发中，页面元素的尺寸大小和页面的字体大小都是我们不可忽略的内容，一个美观大方、层次分明的页面会让人看起来非常舒服，反之，一个排版布局乱七八糟的页面，不仅用户体验度差，还会增加页面的复杂性，况且在各种设备终端层出不穷的今天，页面的设计更是重要中的重要！对此，我们可以试着对页面元素的大小以及字体的大小，都设置为相对值，不再是固定不变的，怎么样？CSS中，专门有这样的一个单位——em(相对长度单位)即可实现，我们今天就来看看如何使用相对长度单位em布局网页内容？
01
1em等于多少px?
下面我们可以先来看一段代码：
<html><head><meta charset="UTF-8"><title>title><style type="text/css">html {font-size: 1em; }style>head><body><p>段落1p>body>html>本代码中，我们将html的字体设置成了1em,一般浏览器默认字体大小是16px，那我们来看看，“段落1”的字体大小是多少px?
答案是16px,也就是当我们html的值是1em时，它的子元素的字体大小都是以浏览器默认的字体大小来呈现出来的。带着这个结论，我们在CSS中新添如下代码：
body{ font-size: 1.5em;}再次看看“段落1”的字体大小是多少？
答案是24px，那么这个24是如何来的呢？“段落1”的字体大小=继承自父元素body的像素1.5em*16px而得来的。接下来我们将p的的字体大小也改成1.5em，你们猜“段落1”的字体大小是多少呢？
p{ font-size: 1.5em;}
答案是36px。“段落1”的字体大小=1.5em*该父级元素body的字体大小24px，这个规律大家都知道吧。
到现在为止，我们就可以总结一下em的特点了：
em的值并不是固定的，比如有同学可能自己算了算，将em的默认值当成了16px，其实不然。如果照1em=16px来算的话，最后“段落1”的字体大小应该是1.5em*16px=24px才对，但是实际却是36px。
em会随着父级元素的字体大小的变化而变化的。
02
如何让1em=10px？
由前面的结论我们知道了，浏览器默认的字体大小为16px.那么可以定位html的1em的值就为16px，下面层级如果有变化，依次去乘以16px即可，那么问题来了，次次乘以父级元素的大小也是很麻烦的，可不可以把em的值等于10px,这样10em即是100px,岂不是更好？
我们可以这样修改一下代码：
html{ font-size: 62.5%;}p{ font-size: 1.5em;}再看看“段落1”的字体大小是不是1.5em*10px=15px呢？
确实是的！那是如何做到的呢？前面我们也说过，浏览器默认的字体大小是16px.言外之意就是设置了100%，那如何让它变成10px呢？不就是62.5%吗？
这就是相对长度单位em的用法，是不是很庆幸自己又学会了一个知识点呢？往期精彩
binarySearch与IndexOf的那些事儿~
2020-11-01
新机必装！那些你不知道的实用技软件在这里！文末免费获取
2020-10-31
自从有了这款辣椒酱，拌饭再也不用老干妈
2020-10-30
如何使用bootstrap实现轮播图？
2020-10-29
班级日常分享：一天一瞬间！
2020-10-29
中流击水，浪遏飞舟
2020-10-28
点分享点点赞点在看
em表示什么长度单位_使用相对长度单位em布局网页内容相关推荐
- em算法 实例 正态分布_【机器学习】EM算法详细推导和讲解
今天不太想学习,炒个冷饭,讲讲机器学习十大算法里有名的EM算法,文章里面有些个人理解,如有错漏,还请读者不吝赐教. 众所周知,极大似然估计是一种应用很广泛的参数估计方法.例如我手头有一些东北人的身高的 ...
- em表示什么长度单位_em单位_html长度单位EM
html长度单位em引见,甚么时辰用em,em如何换算成PX像素,在下面状况下css 设置em单位. em指字体高,任意阅读器的默认字体高都是16px.所以未经调处的浏览器都切合:1em=16px,所 ...
- 使用相对长度单位em布局网页内容
顺便问一下哈?那个辣椒酱大家感觉怎么样,你们也买了也尝了,是不是该反馈反馈啦~~如果还有想要的,可以联系我呐! 原文地址:自从有了这款辣椒酱,拌饭再也不用老干妈 前言:在页面开发中,页面元素的尺寸大小 ...
- 使用相对长度单位rem布局网页内容
前言:上篇我们提到了相对单位em的用法,知道了em的概念,即是一个相对的单位,也知道了em的值不是固定的,p标签里的em和p里面的div下面的1em的px值并不是一样的.具体是多少呢?那就得看一下父级 ...
- css的长度单位没有哪些,css 长度单位知多少
写在前面:在这个是个 coder 都会写两行前端代码的年代下,几乎都对 css 不是很陌生,但是真正能写好的确需要对 css 深入学习了,做为一个不称职的后端,我觉得我也有必要多了解一下. css 中 ...
- 长度单位换算python_长度单位换算表-在线长度单位转换器
长度单位换算表-在线长度单位转换器 公里(kilometre) 米(metre) 分米(decimeter) 厘米(centimeter) 毫米(millimeter) 微米(micrometer) ...
- 浅谈css3长度单位rem，以及移动端布局技巧
rem是什么? rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位.root!!!!!!!!!根节点,也就是 ...
- em算法 实例 正态分布_人人都能看懂的EM算法推导
↑ 点击蓝字 关注极市平台作者丨August@知乎(已授权)来源丨https://zhuanlan.zhihu.com/p/36331115编辑丨极市平台 极市导读 EM算法到底是什么,公式推导怎么去 ...
- 韩顺平php可爱屋源码_韩顺平_php从入门到精通_视频教程_第20讲_仿sohu主页面布局_可爱屋首页面_学习笔记_源代码图解_PPT文档整理...
韩顺平_php从入门到精通_视频教程_第20讲_仿sohu首页面布局_可爱屋首页面_学习笔记_源代码图解_PPT文档整理 对sohu页面的分析 注释很重要 经验:写一点,测试一点,这是一个很好的方法. ...
最新文章
- Linux socket TIME_WAIT 优化
- AlphaGo制胜绝招：蒙特卡洛树搜索入门指南
- 神经网络应该注意的重要问题
- 深耕大数据市场，所问数据打造深度学习数据分析与预测引擎
- linux中断响应时间太慢_linux+arm系统学习与基础学习
- 民间借贷利息多少才合法？
- JDBC 连接MYSQL数据库
- 数据中台：不是产品，不是技术，到底是什么？（附完整PPT下载）
- 安装配置优化nginx
- github出现Your account has been flagged.导致账号无法公开的解决办法
- 学术论文-结果描述常用表达
- python以下导入包的格式错误的是_Python结合Tableau，万字长文搞定传统线下连锁店数据分析...
- python pip安装win32com_pip install win32api报错解决方法
- 逍遥模拟器android4.0版本,逍遥安卓模拟器工作室版
- Notepad++--常用的插件
- android sony 镜像,解释如何使用Sony TV DLNA屏幕镜像功能
- windows共享 无法访问
- 从fasta文件中筛选序列并输出
- DBeaver解决连接Oracle之后出现库名为数字问题
- python写音乐_你想过用代码来写音乐吗？我用业余时间开发的一个可以编程写音乐的python库（一）...