百分比尺寸应用总结

1.百分比取值

1.padding width margin 可以取值为百分比

以上用百分比取值比如width:50% 都是相对包含块的宽度。

注意：这里也包括 padding-top，bottom 以及margin-top，bottom

2.height百分比取值（包含块定高的时候有效，如果包含快高不定，设置无效）

3.translatex(50%)百分比取值指的是相对当前自己的盒子的width的一半，translatey（50%）当前自己盒子的高度的一半，并不是包含盒子。

4.固定定位以及绝对定位的，left和right百分比，是相对于宽度，top和bottom百分比，是相对于高度。

2.比例取值

1.em 相对父元素font-size大小。父元素没有找祖先元素，直至到html默认字体大小，找到为主。

1em = font-size

2.line-height：2是相对当前自己元素盒子的font-size大小的倍数，如果没有看父元素有没有，依次向祖先元素上找，最后没有以html的font-size默认为主 因为font-size会继承。

4.z-index：2 （此属性是在固定定位时用，如果超过2个盒子都是相同固定定位，就会有重叠，此时可以设置z-index的值，谁的值设置的越大，谁就会在上面，离屏幕越近）。

5.rem相对于html字体大小，比如1rem=1html的字体大小

3.圆角

1.正方形 变成圆形就是把border-radius：50%（半径为宽度的一般）

border-radius也可以设置为数值，代表以数值为为半径的圆，在各个角相切变成圆角。

2.长方形，如果想要想要边圆角，可以设置border-radius：高度的一半。