css的%是相对于什么来取值的

这篇文章主要讲解了“css的%是相对于什么来取值的”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css的%是相对于什么来取值的”吧！ css %是相对于包含块的高宽或字体大小来取值。如果是静态定位和相对定位，包含块一般就是其父元素，则%相对于父元素取值；如果是绝对定位元素，包含块是离它最近的position非static值的祖先元素，则%相对于该祖先元素取值；如果是固定定位元素，包含块是视口，则%相对于视口取值。本教程操作环境：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 ）相对于容器的 heigh免费云主机域名t 计算注意，在 translate 还有一个 z 轴的函数 translateZ() 。它是不接受百分比为单位的值。百分比的继承如果某个元素设置了百分比的属性，则后代元素继承的是计算后的值。例如：那么p的子元素继承到的值是 line-height: 12px，而不是 line-height: 120%。感谢各位的阅读，以上就是“css的%是相对于什么来取值的”的内容了，经过本文的学习后，相信大家对css的%是相对于什么来取值的这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: GO语言基本类型String和Slice,Map怎么使用

今天小编给大家分享一下GO语言基本类型String和Slice,Map怎么使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。String是Go语…