梁山专做网站的公司,小说网站做编辑,茶文化网站网页设计,帮人推广的平台前言#xff1a;上篇我们提到了相对单位em的用法#xff0c;知道了em的概念#xff0c;即是一个相对的单位#xff0c;也知道了em的值不是固定的#xff0c;p标签里的em和p里面的div下面的1em的px值并不是一样的。具体是多少呢#xff1f;那就得看一下父级元素的值了上篇我们提到了相对单位em的用法知道了em的概念即是一个相对的单位也知道了em的值不是固定的p标签里的em和p里面的div下面的1em的px值并不是一样的。具体是多少呢那就得看一下父级元素的值了本级元素的px值随着父级元素的变化而变化的“进制”是浏览器的默认值16px;和em对应的还有个相对单位就是我们今天重点要说的rem;011rem等于多少px?我们先来看一段代码!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/csshtml{font-size: 1rem;}/style/headbodydiv iddiv1div iddiv2p段落1/p/div/div/body
/html在代码中我们先设置了html的字体大小为1rem,然后来看看“段落1”的字体大小是多少 结果是16px为什么因为浏览器的默认字体大小是16px此时的1rem就是16px了。接下来我们将div的的字体大小设置为1.5rem再来看看“段落1”的字体大小是多少呢 结果是24px看到这个结果大家是不是就很开心了呢因为我们知道这个结果怎么算的那就是16px*1.5rem的结果。接下来我们再将div2的字体大小调整一下为1.5rem,有的伙伴就安奈不住了老师这个我知道这个的值是36px.按照em的思路算24px*1.5rem,结果就是36px。那我们来看看结果 为什么还是24px呢怎么不是36px?问题就出在rem这个单位上至此我们就可以总结一下rem的特性rem的值不是固定的rem的值与父级元素无关与根级元素有关本案例中即html的值“进制”也是浏览器的默认值本案例中默认是16px这就是相对长度单位rem的用法是不是很庆幸自己又学会了一个知识点呢往期精彩使用相对长度单位em布局网页内容2020-11-02 binarySearch与IndexOf的那些事儿~2020-11-01 新机必装那些你不知道的实用技软件在这里文末免费获取2020-10-31 自从有了这款辣椒酱拌饭再也不用老干妈2020-10-30 如何使用bootstrap实现轮播图2020-10-29 点分享点点赞点在看
