元素的margin和padding值什麼時候生效
元素可以分爲塊級元素，行內元素以及行內塊級元素。
- 行內元素的margin或者padding只有
margin-left和margin-right以及padding-left和padding-right有效果，margin-top、margin-bottom、padding-top、padding-bottom這四個屬性都可以對行內元素（如span）設置，但是在頁面中並不會生效。 - 塊級元素以及行內塊級元素的margin和padding都是正常生效的。
在一個頁面中HTML纔是統治者
當頁面中的一個元素div不對其設置寬度和高度的時候，則HTML、body、div，三者的寬度都是100%,但是高度都是爲0。
於是可以打出以下結論
塊級元素當沒有主動爲其設置寬度和高度，瀏覽器會自動爲其分配可使用的最大寬度(比如全屏寬度)，但是不負責分配高度，
塊級元素的高度是由子元素堆砌撐起來的。那麼，html和body標籤的高度也都是由子級元素堆砌撐起來的。
再看一個小栗子先上一點代碼：
<style>
*{margin: 0;padding: 0}
.div1{ height: 100px;background: yellow}
.div1 .div2{height: 50%;background: cadetblue}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>此時我們可以看到div2的高度爲div1高度的一半
當我們不對div1設置高度的時候，頁面中什麼都沒有，
我們可以得出以下結論：
元素高度百分比需要向上遍歷父標籤要找到一個
定值高度才能起作用，如果中途有個height爲auto或是沒有設置height屬性，則高度百分比不起作用。
再來一個小栗子：
<style>
* {
margin: 0;
padding: 0;
}
html {
background: rgb(151, 136, 136)
}
body {
background: rgb(89, 23, 156)
}
.div1 {
height: 100px;
background: yellow;
width: 100px
}
.div1 .div2 {
height: 50%;
background: cadetblue;
width: 100px
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>效果圖如下：
當html標籤無背景樣式時，body的背景色其實不是body標籤的背景色，而是瀏覽器的。
一旦html標籤含有背景色，則body的背景色變成了正常的body標籤自己的背景色，而此時的html標籤最頂級，背景色被瀏覽器獲取，成爲瀏覽器的背景色。