HTML元素的margin/padding的值使用百分比時(shí)以父元素的寬為準(zhǔn)
HTML元素margin/padding的值如果使用百分比的時(shí)候，一律是按照父級(jí)的width來(lái)計(jì)算的，包括垂直方向上的（margin-top/margin-bottom，padding-top/padding-bottom）。
以前一直都沒(méi)太注意，知道真相的我眼珠子掉下來(lái)。
百度了下得到如下精辟話語(yǔ)：
margin/padding-top/bottom 的百分比之所以按照 width 計(jì)算，其實(shí)理由很簡(jiǎn)單，就是要匹配主要的 use cases。那就是——要構(gòu)建在縱橫兩個(gè)方向上相同的 margin/padding。如果兩個(gè)百分比的相對(duì)方式不同，那用百分比就無(wú)法得到垂直和水平一致的留白。
知道了結(jié)論，這樣的話就多了很多應(yīng)用場(chǎng)景。
1，自適應(yīng)布局： 父級(jí)樣式：position:relative;padding-top:40%;子元素樣式：position:absolute; height:100%;這樣就可以構(gòu)建一個(gè)動(dòng)態(tài)的盒子，他的高度隨著寬度的變化而變化。移動(dòng)端布局的時(shí)候很有用，會(huì)隨著不同屏幕的寬度變化而變化，從而適應(yīng)多種屏幕。
2，構(gòu)建動(dòng)態(tài)正方形：width:50%;padding-top:50%; height:0;這樣一個(gè)盒子就是一個(gè)標(biāo)準(zhǔn)的正方形了，并且隨著寬度變化而變化。結(jié)合上面的自適應(yīng)布局，能完成很多效果。
BTW：有時(shí)候使用這種布局的時(shí)候，文字的高度會(huì)成為一種不確定性，這個(gè)時(shí)候可以使用line-height:0來(lái)讓盒子不考慮字體的高度。