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的宽度。