css相对长度单位有哪些?

顾名思义,相对单位是根据与其他事物的关系来度量。所以,要注意到,所度量的实际距离,可能会因为不在其控制之下的其他因素而改变。如屏幕分辨率、可视区域的宽高等等。

css相对长度单位有哪些?

em:一个字符大小,字符大小在浏览器中默认为16px

rem:相对于根元素HTML的字体大小,我们将HTML字体大小设置为100px,则可以更为方便的计算

%:百分比是一个相对长度单位,相对于包含块(containing block)的高宽或字体大小

  • 关于包含块(containing block)的概念,不能简单地理解成是父元素。

  • 如果是静态定位和相对定位,包含块一般就是其父元素。

  • 如果是绝对定位的元素,包含块应该是离它最近的 position为非static属性的祖先元素。

  • 如果是固定定位的元素,它的包含块是视口(viewport)

vh:视口高度,默认为视口高度的1%

vw:视口宽度,默认为视口宽度的1%

vmin:布局视口高度和宽度之中值较小的那个的 1/100

vmax:布局视口高度和宽度之中值较大的那个的 1/100

fr:grid布局中利用的一个长度单位。在gird布局中,我们经常会利用fr来进行计算

grid-template-rows: 30px 1fr 2fr;

上面这句语句则是声明三行的grid,第一行的高度为30px,第二行的同样为30px,第三行的为60px

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css相对长度单位有哪些?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏