1.背景介绍
随着CSS的发展和版本的迭代,我们能能使用的标签也随之增多,有许多标签虽然在结果上表现出来十分相似,
但如果不理解其内涵和意义,容易引起编程规范上的错误,
本次小课堂会分享文本格式、图像的文字注释和替代以及链接的一些属性,对他们进行区分学习
2.知识剖析
2.1、绝对单位: px,pt,cm,mm这些定值都是固定的,不会随着屏幕的宽度改变而改变。
px:为像素单位。它是显示屏上显示的每一个小点,为显示的最小单位,。
in:英寸,绝对长度单位。
cm:厘米,绝对长度单位。
mm:毫米,绝对长度单位。
pt:point,大约1/72寸,绝对长度单位。
pc:pica,大约6pt,1/6寸,绝对长度单位。
相对单位:em,rem,%、em、rem、vw、wh、wmin、wmax相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px,则2em == 32px;),整个页面内1em不是一个固定的值。em会继承父级元素的字体大小。
rem:相对单位(root em,根em)。但相对的只是HTML根元素,相对根节点html的字体大小来计算。
百分比相对单位:vw、vh、vm、vmax、vmin、%。
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个
%:百分比,它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%,则为父元素的一半。
3.常见问题
em和rem有什么区别?
4.解决方案
“em”是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem是相对于根元素。