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等。这些属性在使用百分比时，参照物不尽相同：

.net全诚外卖叫餐(订餐)系统

全诚外卖通是全诚团队继“全诚商城”之后以叫餐（预订）为核心的又一力作，或者称之为“特色店铺系统”，系统是基于.net2.0 + SQL构架、B/s框架的多用户店铺管理系统；外卖通的开发旨在以商家和消费者为服务对象，借以二者相互依存的关系，以互动的形式成就全诚外卖通一个完善的WEB系统平台，在这个平台里，商家可以扩大销售

下载

• 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前端开发）