• 技术文章 >web前端 >前端问答

    css %是相对于什么

    青灯夜游青灯夜游2022-09-06 16:45:25原创141

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

    大前端成长进阶课程:进入学习

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

    CSS %--百分比

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

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

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

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

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

    实现代码:

    1.png

    结果图:

    2.png

    从图上我们可以看出:设置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等。这些属性在使用百分比时,参照物不尽相同:

    (2)文本中的百分比

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

    (3)定位中的百分比

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

    (4)变换中的百分比

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

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

    百分比的继承

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

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

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

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

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:jquery中有eval执行函数吗 下一篇:css创建文本阴影适用于图片么
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• css的三种不同的引入方式是什么• css怎么让文本域中字用不同颜色• css如何让第一个li不加样式• css怎么给指定第几个li加样式• css怎么设置左边距消失
    1/1

    PHP中文网