一、当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>
