[toc] > 请注意，当百分比值用于可继承属性时，只有结合参照值计算后的绝对值会被继承，而不是百分比值本身。 ## 使用百分的场合 在目前项目中，最常用百分的莫过于`width` 和`height`。其他可以用到百分比的样式包括：`border-radius`、`background-position`、`font-size`、`line-height`、`vertical-align`、`bottom`、`left`、`right`、`top`、`transform:translate`等。 ## 参照是父级（or 定位父级） ### 不明确的高度和百分比 有一种特殊情况是，父元素没有明确的高度定义，比如说`min/max-height`这种（或则没有手动设置高度，为auto），并且子元素使用百分比并且不是绝对定位，那么这时候百分比等同于`auto`(也就是说该元素的高度依据的是其本身内容的高度)。  值得注意的是只是**高度**存在这种情况，而宽度并**不存在** 如下图示例中，给一个父级元素`max-width:70%`的不确定宽度，子元素仍然能使用百分比宽度  #### 与绝对定位 但是一旦子元素是经过定位的，那么高度就会根据定位父级(**没有的话就是视口**)进行计算  #### 与fixed（固定为定位） 固定定为的话，使用百分比时的高度计算始终是按照**视口**来决定的。 ### margin和padding `margin/padding-top/bottom`计算是按照定位父级的**宽度**来计算的。 没错，`margin`，`padding`，**就是这么奇葩！** ``` .box{ width: 400px; height: 200px; background:orange; overflow:hidden; } .son{ width:50px; height:50px; margin-top:50%; /* ->200px，说明是按照width来计算的 */ background:orangered } ``` ### font-size 这个属性的百分比参考值是它的父元素的font-size，没有太多的信息，是比较纯粹的一个百分比。 ## bottom、left、right、top 定位使用的四个方向值，如果使用百分比的话，参考的是**元素包含块**的尺寸，这个时候不同于margin或padding，left和right是参照包含块的宽度，bottom和top是参照包含块的高度 ## 参照物是自身 ### border-radius border-radius的百分比参考值是**自身**的尺寸 横轴上的百分比参考的是元素自身的宽度，纵轴上的百分比参考的是元素自身的高度，负值是无效的 ### transform:translate 在水平或者垂直居中的应用场景中，我最常使用的便是这个平移变换了,轻轻松松的-50%就可以让块元素居中,那么这个百分之50%基于的是什么样的参考值呢？答案便是其**自身**元素的宽度或者高度 注意，这个参考物是自身的`border-box`的尺寸 ## 参照物是富余空间 ### backgroud-position background-position这个属性允许你在它的包含块中随意移动背景图片(或者渐变)，默认值是0 0，这个时候的图片是放在左上角的位置，如下demo: ``` <div class="border-container"></div> ``` 如果使用百分比，那么百分比的计算应该是这样的，假设一个容器的长宽为300X200，图片是150X150，那么当设置background-position: 20% 100%，那么图片新的位置应该是(以左上角为例): ``` (0, 0) => ((400 - 150) * 20%, (200 - 150) * 100%) ``` 也就是移动的结果是`(父元素-背景图片)*百分比`，这样的设计很符合我们平时排版的思路。 ## line-height line-height这个属性的百分比参考的是自身的**font-size**大小 ## vertical-align vertical-align顾名思义是纵向对齐，其参考值是自身的**line-height**