CSS常用属性计算原理

absolute: left、right／top、bottom 的百分比值分别根据父元素的 wdith / height 计算

margin: top /right / bottom/ left 的百分比值都是根据父元素的宽度计算

transform: translate( ) 的百分比值是根据元素自身宽高进行计算

line-height: 百分比值根据父元素文字大小进行计算／小数值根据子元素文字大小进行计算 例如：line-height：1.5 等同于 line-height：1.5em

min-height：百分比值根据包含它的块级对象的百分比最小宽度计算。这个属性是根据元素内部元素的高度来计算的，举个例子，想让 body 的最小 height 是 100%，而为 body 设置了min-height:100%; ，这样设置后，你会发现这个 body 的 height 只是其内容的全部高度，并不是view的100%

border-radius: 百分比值根据元素整体宽高进行计算，即包含边框和 padding 后元素的尺寸，而不是单纯的相对于 widh/height 计算

border: 不支持百分比值，支持关键字 thin(1px)、默认medium(2px)、thick(3px)

vertical-align: 百分比值根据元素自身 line-height 计算（该属性要写在父元素上才能控制父元素内容的排布）

padding: 百分比值根据元素自身宽度计算，不支持任何负值形式

height/width: 百分比值根据父元素 height/ width计算，注意 width：100%是子元素的content的宽度等于父元素content的宽度。

转载于:https://www.cnblogs.com/Kuro-P/p/8430792.html