css %是相对于什么

css %是相对于包含块的高宽或字体大小来取值。如果是静态定位和相对定位,包含块一般就是其父元素,则%相对于父元素取值;如果是绝对定位元素,包含块是离它最近的position非static值的祖先元素,则%相对于该祖先元素取值;如果是固定定位元素,包含块是视口,则%相对于视口取值。

css %是相对于什么

前端(vue)入门到精通课程:进入学习

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS %--百分比

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

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

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

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

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

实现代码:

css %是相对于什么

结果图:

css %是相对于什么

从图上我们可以看出:设置5em的div的第一行字符刚好为5个字符大小,因为如上所说,它是相对于当前元素字体的尺寸, 宽度占用90px,5 X 18 = 90px。设置5rem的div第一行字符要小一些,因为如上所说,它是相对于根元素字体大小(默认为浏览器大小16px),比18px要小一些,宽度占用80px,5 X 16 = 80px。设置百分比显示的第一行最大,因为如上所说,它是相对于父元素的尺寸比例, 宽度占用160px,200 X 80% = 160px。

常见场景中的百分比单位的使用

(1)盒模型中的百分比

在CSS中的盒模型包含的属性有:width、max-width、min-width、height、max-height、min-height、padding、margin等。这些属性在使用百分比时,参照物不尽相同:

  • width、max-width、min-width:值为百分比时,其相对于包含块的 width 进行计算;

  • height、max-height、min-height:值为百分比时,其相对于包含块的 height 进行计算;

  • padding、margin:值为百分比时,如果是水平的值,就是相对于包含块的 width 进行计算;如果是垂直的值,就是相对于包含块的 height 进行计算。

(2)文本中的百分比

在CSS中文本控制的属性有font-size、line-height 、vertical-align、 text-indent等。这些属性在使用百分比时,参照物不尽相同:

  • font-size:根据父元素的font-size 进行计算;

  • line-height:根据font-size进行计算;

  • vertical-align:根据line-height进行计算;

  • text-indent:如果是水平的,则根据width进行计算,如果是垂直的,则根据 height 进行计算。

(3)定位中的百分比

在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作为单位。其参照物就是包含块的同方向的width和height。不同定位的包含块不尽相同:

  • 如果元素为静态( static )或相对定位( relative ),包含块一般是其父容器;

  • 如果元素为绝对定位( absolute ),包含块应该是离它最近的 position 为 absolute 、 relative 或 fixed 的祖先元素;

  • 如果元素为固定定位( fixed ),包含块就是视窗( viewport )。

(4)变换中的百分比

CSS 中的 transform 属性中的 translate 和 transform-origin 值也可以设置百分比。

  • translateX() 根据容器的 width 计算

  • translateY() 根据容器的 height 计算

  • transform-origin 中横坐标( x )相对于容器的 width 计算;纵坐标( y )相对于容器的 height 计算

注意,在 translate 还有一个 z 轴的函数 translateZ() 。它是不接受百分比为单位的值。

百分比的继承

如果某个元素设置了百分比的属性,则后代元素继承的是计算后的值。例如:

p { font-size: 10px;line-height: 120%; }

那么p的子元素继承到的值是 line-height: 12px,而不是 line-height: 120%

(学习视频分享:web前端开发)

以上就是css %是相对于什么的详细内容,更多请关注龙方网络其它相关文章!

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: