登录  /  注册

css %是相对于什么

青灯夜游
发布: 2022-09-06 16:45:25
原创
1340人浏览过

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

css %是相对于什么

本教程操作环境: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等。这些属性在使用百分比时,参照物不尽相同:

  • 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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号