>首页> IT >

每日视讯:css %是相对于什么

时间:2022-09-06 17:01:35       来源:PHP中文网

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

CSS %--百分比


(资料图片仅供参考)

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

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

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

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

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

实现代码:

结果图:

从图上我们可以看出:设置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 %是相对于什么的详细内容,更多请关注php中文网其它相关文章!

关键词: 如上所说 不尽相同 绝对定位