GitHub

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

posted @ 2018-02-08 11:29  長风  阅读(338)  评论(0编辑  收藏  举报