元素豎向的百分比設(shè)定是相對于容器的高度嗎？
一般而言，子元素的百分比設(shè)定都是以父元素為依據(jù)，子元素的寬度百分比依賴父元素的寬度百分比，子元素的高度百分比依賴父元素的高度百分比。那么margin ，padding這些屬性也是如此嗎？
不是的，舉個(gè)例子.
如下代碼設(shè)置了父元素的寬和高位200*100px。
之后對子元素的margin-top設(shè)置的20%。
那么這20%是200的20%還是100的20%？
一般可能覺得是100的20%。高對高嘛。然而事實(shí)并非如戲。是200的20%。證據(jù)如下，打開瀏覽器看看p元素的盒子。
<div class="con">
<p> this is a test</p>
</div>
<style>
.con {
width:200px;
height:100px;
background: gray;
}
p {
background : yellow;
margin-top: 20%;
}
</style>
上述代碼中p的盒子如圖所示.可以看出margin是40。那么顯然是200*20%得來的。
image.png
如果是padding-top：20%呢？
可以看到，這個(gè)padding-top也是相對于父元素的width計(jì)算的來的。
image.png
那么padding-left呢？
image.png
哎怎么也是40呢？？
這個(gè)為啥呢？？
總結(jié)
對于豎直方向的margin和padding，參照父元素的寬度。
對于水平方向的margin和padding，也是參照父元素的寬度。
為什么這么設(shè)置？
不知道。
