端开发中长度单位有很多,最为常用和熟知的肯定就是px了,随着前端的不断发展,em和rem也越来越普及,只用px一把梭的时代早已成为过去。是px过时了吗?如果对这些单位的使用场景不够了解,可能就会拿着一个rem从头梭到尾了。本篇我们来好好梳理一下css中的长度单位以及它们的使用场景,我们要在合适的场景使用合适的单位。
px是像素点单位,与之线性相关的单位有mm(毫米)、cm(厘米)、in(英寸)、pt(点,印刷术语,1/72英寸)、pc(派卡,印刷术语,12点)。
1in=25.4mm=2.54cm=6pc=72pt=96px
em是相对长度单位,适合基于特定的字号进行排版。1em=当前元素的字号,其准确值取决于作用的元素。
.padded {
font-size: 16px;
padding: 1rem;
}
上面的代码设置了元素的内边距为16px。最终浏览器会根据相对单位计算出绝对值。
使用em来设置padding、height、width、border-radius很合适,当前元素如果继承了不同的字号,响应的内边距、宽高也会自动随之缩放。
需要注意的是,如果使用em定义元素的字号,em的表现会稍有不同。上面提到,当前元素的字号决定了1em的值,但是,如果声明font-size:1.2em,该元素的字号肯定不能等于自己的1.2倍。实际上,此时font-size是根据当前元素继承的字号来计算的。
em示例
上图可以看到,p标签中的字号是1.2*16=19.2px,font-size是根据继承的字号计算的。
em需要注意的就在于此,同时用它指定一个元素的字号和其他属性时,浏览器必须先计算字号,然后使用这个计算值算出其余的属性值。
另外,当用em来指定多重嵌套的元素的字号时,就会产生意外的结果,内嵌的元素会一直继承上级的字号,导致要么嵌套字号越来越大,要么越来越小。
rem和em很像,其实和em的理念很像,都是相对单位,rem中的r是root,顾名思义,rem是相对一个root元素(一般以html标签作为根元素)计算值的,不管在文档的什么位置。
rem结合了px和em的优先,既保留了相对单位的优势,又简单易用可控。那只用rem行吗?行,也不行。如果你只了解习惯这一个单位,就要充分发挥rem的优势,全站梭到底也没什么不行的。但是如果你想写出简单好看的css代码,在不同的场景下使用适当的单位会让你和你的队友少趟许多的坑。
一般情况下,我会使用rem设置字号,用px设置边框、用em来设置其他大部分的属性,尤其是内边距、外边距、圆角等。这样字号是可预测的,同时还能在其他因素改变元素字号时,借助em缩放内外边距。你觉得呢?
我们先介绍一下概念:
视口:浏览器窗口里网页可见部分的边框区域,不包括浏览器的地址栏、工具栏、状态栏。
vh:视口高度的1/100
vw:视口宽度的1/100
vmin:视口宽、高中较小的一方的1/100
vmax:视口宽、高中较大的一方的1/100
从定义上,相信小伙伴们已经明白了视口单位的用法。我来介绍相对视口单位的一个比较特别的用途:设置字号。诶?之前不是说设置字号用rem吗?用视口单位能有什么特别的呢?
用rem设置字号的时候,为了适配不同的屏幕大小,免不了要使用@media根据不同的屏幕设置根元素的字号大小,有一个小小的问题是,如果动态去调整浏览器的宽度,达到设置的断点时,一定程度会导致页面的字体突然变大或缩小。但是,如果是使用vw来设置字号呢?页面的字号是不是就不会突然的变化?会很平滑?
当然了,这种用法在实际应用中推广的程度不是特别高,有些是因为浏览器支持的问题,有些是因为没必要因为这么一点点的优化,而放弃心爱的rem。
今天所写的内容主要是帮大家回顾一下css单位的用途及场景,还有一些单位(如fr)还没有提及,将会在后面的文章中结合别的属性写。各种单位的存在一定都有各自的特长和适合的场景,偶尔打开一下思路,也许能有更好的解决方案。大家有想和我分享的内容吗?感谢评论关注哦!
、position:absolute的原点是哪里?
答:position:absolute 是绝对定位
原点默认是body的左上角,意思就是设置了 left:0 top:0 以后,此元素会位于左上角;但如果父元素设定了position属性以后,此元素的原点会跟随父元素的左上角。
2、简单说一下css选择器都有哪几种?
答:有id选择器,class选择器,元素选择器
> 子选择器 空格子选择器
伪类选择器
属性选择器 等等
如果觉得这样说太笼统,想举例子的小伙伴,去看前面的文章啊,有专门的文章进行讲解来着
3、怎么把一个元素隐藏起来?尽可能多的说出你的解决办法
答:
4、说一说清除浮动的解决办法
答:
清除浮动是指一个父元素,N个子元素,子元素设置了float:left 这样父元素如果没有设置高度的话,父元素就失去了height 。这样不管子元素有多高,父元素都不能被撑起来。所以清楚浮动问的是怎么把父元素撑起来的问题。
5、div垂直居中,说出你用过的解决方案
答:
<div class="dd">书软</div>
6、两个a标签之间出现间隙的情况遇到过吗?怎么解决的
答: 写html代码的时候,如果两个a标签出现换行,就会有间隙,可以不换行,写到一行,间隙就没了;也可以设置 display:inline-block 然后设置一定量的margin 负值,这样也是可以消除间隙的。
7、请写出css中 px em rem vw 的使用
答: 这里不做详细的解说了啊,前面的文章我们有一节说的很详细了,可以再去看一遍。小伙伴如果觉得还不是很清楚,就去看看文章,再电脑上敲一敲代码。面试的时候一定不能背书,要总结出自己的一套说辞,这样才能更显得是你的经验之谈。面试官也怕丢人,面试的时候人家比自己懂得太多不行,所以有一些问题你能说出大概他就不往深里问了。当然,也不排除他觉得你懂得多,看你不顺眼,就使劲儿难为你的。
8、从css角度说说,如何优化你的网页
答:
9、关于css盒模型
答: 这个问题也很常见,这个问题不清楚的回去看文章啊,前面有一节说这个问题的文章,在电脑上试一试,在纸上画一画,体会体会,这里不做详细解说了。
击右上方红色按钮关注“web秀”,让你真正秀起来!
em 和 rem这种相对长度单位进行页面排版是web开发中的最好的选择。在页面排版中较好应用em 和 rem,根据设备尺寸缩放显示元素的大小。这就使得组件在不同设备上都达到最佳的显示效果成为可能。
web开发中该用 em 还是 rem 呢?
但问题是究竟该用 em 还是 rem 呢?关于这个问题一直存在比较大的争议。本文将会给大家介绍究竟什么是 em 和 rem 和如何进行两者的选择,以及结合两者优势构建模块化的web组件。
em 是相对长度单位。它相对于当前元素字体尺寸,即font-size。举例来说,如果当前元素的字体是20px,那么当前元素中的1em就等于20px。
h1 { font-size: 20px } /* 1em=20px */ p { font-size: 16px } /* 1em=16px */
实际开发中,用相对长度单位(如 em)表示字体大小是WEB开发中的最好的选择。请看下面的代码:
h1 { font-size: 2em }
这里的h1元素字体大小究竟是多少呢?
这时,我们需要根据<h1>父元素字体的大小,来计算<h1>字体的尺寸大小。如果父元素是<html>,而且<html>的字体大小是16px。就可以计算出<h1>的字体大小是32px,即2*16px。
用代码表示如下:
html { font-size: 16px } h1 { font-size: 2em } /* 16px * 2=32px */
设置<html>字体的大小一般来说都不是一个好主意,因为这样重写了用户浏览器的默认设置。相反,可以使用百分比值或者根本不声明<html>字体大小
html { font-size: 100% } /* 缺省 16px */
对于大多数用户或浏览器,字体缺省大小是16px(未做浏览器缺省字体尺寸设置)。
em 还能用来指定除字体大小外的其它属性,象margin或padding等属性都可以用em来表示。
看下面的代码, 对于<h1>和<p>元素,margin-bottom值应该是多少? (假设<html>的字号被设置为100%)
h1 { font-size: 2em; /* 1em=16px */ margin-bottom: 1em; /* 1em=32px */ } p { font-size: 1em; /* 1em=16px */ margin-bottom: 1em; /* 1em=16px */ }
上述<h1>和<p>的margin-bottom都是1em,但是外边距结果值却不相同。上述现象的出现,是因为em是相对于当前元素字体的大小。由于<h1>中的字体大小现在设置为2em, 因此<h1>中其它属性的1em值就是 1em= 32px。这里比较容易引起误解的地方。
rem表示 root em,它是相对于根元素的长度单位。这里根元素就是<html>中定义的字体大小。这意味着任何地方的1rem总是等于<html>中定义的字体大小。
利用上述相同的代码,我们用 rem 来代替 em,查看margin-bottom的计算值究竟是多少?
h1 { font-size: 2rem; margin-bottom: 1rem; /* 1rem=16px */ } p { font-size: 1rem; margin-bottom: 1rem; /* 1rem=16px */ }
如上述代码所示,1rem总是等于16px(除非变更了<html>字体的大小)。rem的大小相较于em来说意义更直接明确,也很容易理解。
在项目开发中究竟是选用 rem 还是 em 一直以来争议不断。一些开发人员不使用rem,因为rem使组件不那么模块化。而另一些开发人员喜欢rem的简单性,使用rem处理所有元素。
其实 em和rem都有各自的优势和劣势,在实际项目开发中,应该结合使用两者,利用各自的优势,从而实现较好代码质量和显示效果。
那么在具体的应用中如何在两者中做选择呢?有两条简单的指导原则:
上述规则太简单了。 为了更好的理解上述规则,我们就以一个简单的header组件为例,说明单独使用两者来实现组件遇到的问题,并体会结合使用两者所带来的优势。
这里我们只使用rem来编写一个header组件,代码及运行结果如下:
.header { font-size: 1rem; padding: 0.5rem 0.75rem; background: #7F7CFF; }
web开发中该用 em 还是 rem 呢?
接下来,网站需要一个尺寸更大的header组件。变更CSS代码如下:
.header { font-size: 1rem; padding: 0.5rem 0.75rem; background: #7F7CFF; } .header-large { font-size: 2rem; }
web开发中该用 em 还是 rem 呢?
从上述运行结果可以看出,文字的内边距(padding)过小,显示效果不协调。如果我们坚持只使用rem,只能变更css代码如下:
.header { font-size: 1rem; padding: 0.5rem 0.75rem; background: #7F7CFF; } .header-large { font-size: 2rem; padding: 1rem 1.5rem; }
web开发中该用 em 还是 rem 呢?
上述代码及运行结果,虽然达到了预期的显示效果,但却违背了代码复用的原则。如果网站有多种尺寸的.header样式,就要多次重复的定义内边距。重复的代码增加了项目复杂度,降低了可维护性。
这时可以利用em可以变更上述代码如下:
.header { font-size: 1rem; padding: 0.5em 0.75em; background: #7F7CFF; } .header-large { font-size: 2rem; }
当元素属性值的大小需要根据元素字体尺寸缩放时,就应该应用 em 来定义属性尺寸。这就是前述规则中的第一条规则。
如果只使用em来定义上述组件,结果会怎样呢?
我们变更上述代码如下(em替换rem):
.header { font-size: 1em; padding: 0.5em 0.75em; background: #7F7CFF; } .header-large { font-size: 2em; } p { padding: 0.5em 0.75em; }
为更接近实际,我们引入了<p>元素,并变更html代码如下:
div class="header header-large">名人名言</div> <p>简单是稳定的前提</p> <div class="header">名人名言</div> <p>简单是稳定的前提</p>
web开发中该用 em 还是 rem 呢?
从上述运行经果中,不难看出.header-large部分的标题并没有和文本左对齐。而如果只使用em实现左对齐,则需要变更CSS代码如下:
.header { font-size: 1em; padding: 0.5em 0.75em; background: #7F7CFF; } .header-large { font-size: 2em; padding-left: 0.375em; padding-right: 0.375em; }
web开发中该用 em 还是 rem 呢?
上述代码及运行结果,虽然达到了预期的显示效果,但却违背了代码复用的原则。如果网站有多种尺寸的.header样式,就要多次重复的定义左右边距。重复的代码增加了项目复杂度,降低了可维护性。
解决上述问题的办法是结合使用em和rem,即使用em定义上下边距,使用rem定义左右边距。变更后代码如下:
.header { padding: 0.5em 0.75rem; font-size: 1em; background: #7F7CFF; } .header-large { font-size: 2em; }
究竟是该使用em还是rem呢?答案应该是结合使用rem和rem。当属性值的大小需要根据当前元素字体尺寸缩放时,就选用em,其它的情况都使用更简单的rem。
最后提供小技巧:em及rem值的设定
em和rem 属性值都要经过计算转化成绝过长度单位。常用的字体尺寸用相对长度单位表示会很困难。看下面常用字体值的rem表示(基本字体尺寸是16px):
如上述列表所示,上述尺寸值的表示及计算都不分的不便。为了解决上述问题要用到一个小技巧,即著名的 "62.5%"技术。具体请查看下述代码:
body { font-size:62.5%; } /*=10px */ h1 { font-size: 2.4em; } /*=24px */ p { font-size: 1.4em; } /*=14px */
通过62.5%的设定,就可以很容易用em来定义具体属性的尺寸了(10倍的关系)。
而rem,则需要采用如下的方式:
*请认真填写需求信息,我们会在24小时内与您取得联系。