這個問題雖說不是很深奧，但是沒有仔細研究過的開發人員也說不太清，今天決定總結一下
（1）子元素height和width的百分比
子元素的height或width中使用百分比，是相對於子元素的直接父元素，width相對于父元素的width，height相對于父元素的height。
（2）top和bottom 、left和right
子元素的top和bottom如果設定百分比，則相對於直接非static定位(預設定位)的父元素的高度，
同樣子元素的left和right如果設定百分比，則相對於直接非static定位(預設定位的)父元素的寬度。
（3）padding
子元素的padding如果設定百分比，不論是垂直方向或者是水平方向，都相對於直接父親元素的width，而與父元素的height無關。
（4）margin
跟padding一樣，margin也是如此，子元素的margin如果設定成百分比，不論是垂直方向還是水平方向，都相對於直接父元素的width。
（5）border-radius，translate，background-size
相對於自身的寬度
css定位中的百分比
在前端css定位中經常面對的乙個問題是，百分比定位究竟是針對於誰定位？一 margin，padding的百分比 首先從css的設計意圖說起，在瀏覽器預設的writing mode horizontal tb 和direction ltr 的情況下，因為css的基礎需求是排版，而通常我們所見的橫排文字...
CSS 屬性值中的百分比
css 中經常會出現百分比單位，搞清它們的基數是件很重要的事情。我查了查 css2.1 標準，在此整理一下 乘以包含塊的寬度 margin,padding,left,right,text indent,width,max width,min width 乘以包含塊的高度 top,bottom,hei...
百分比布局中的居中
百分比布局 垂直 水平居中的幾種方法 1.以em rem設定寬度和高度 父級設定 width 5rem height 5rem text align center 子集設定 line height 5rem 2.利用trunsform 父級設定 width 5rem height 5rem posi...