一、當margin和padding的值設置為百分比時，是指相對於最近的塊級父元素width（非總寬度）的相應百分比的值，即使是margin-top、margin-bottom、padding-top、padding-bottom，設置為百分比時也是以最近塊級父元素的width（非總寬度）為基准，而非height。
CSS權威指南中的解釋：
我們認為，正常流中的大多數元素都會足夠高以包含其后代元素（包括外邊距），如果一個元素的上下外邊距時父元素的height的百分數，就可能導致一個無限循環，父元素的height會增加，以適應后代元素上下外邊距的增加，而相應的，上下外邊距因為父元素height的增加也會增加，如果循環。（摘自https://blog.csdn.net/qq_27437967/article/details/72625900）
1.最近塊級父元素為body時
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body,div{ margin: 0; padding: 0; } .content{ height: 600px; width: 800px; border: 1px solid #0088bb; } .div{ height: 200px; width: 400px; border: 1px solid #0088bb; } .div1{ margin-left: 10%; margin-top:20%; padding-top: 20%; padding-left: 10%; } </style> </head> <body> <div class="div div1"> </div> <div class="div div3"></div> </body> </html>
2.最近父元素不為body元素時
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body,div{ margin: 0; padding: 0; } .content{ height: 600px; width: 800px; border: 1px solid #0088bb;
padding:20px;
} .div{ height: 200px; width: 400px; border: 1px solid #0088bb; } .div1{ margin-left: 10%; margin-top:20%; padding-top: 20%; padding-left: 10%; } </style> </head> <body> <div class="content"> <div class="div div1"> </div> <div class="div div3"></div> </div> </body> </html>
二、當元素的height、width設置為百分比時，分別基於包含它的塊級對象的高度、寬度。這個是常規百分比的含義。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body,div{ margin: 0; padding: 0; } .content{ height: 600px; width: 800px; border: 1px solid #0088bb; padding: 20px; } .div1{ height: 50%; width: 50%; border: 1px solid #0088bb; } </style> </head> <body> <div class="content"> <div class="div div1"> </div> </div> </body> </html>
