百分比布局時，我們有時候會遇到高度 height 設置百分比后無效的情況，例如給div設置height=50%，往往沒能看到效果。
這里我們就來說一說關於百分比布局時的一些坑~
為了方便描述，我在這里寫了一個簡單的例子，html結構如下：
現在我們想要得到的效果是 .son1 的寬度為整個屏幕寬度的100%，高度為整個屏幕高度的20%（html的margin,padding暫且不計）
【案例一】：如果我的css代碼是下面這樣的，我們看到底行不行：
但是，瀏覽器渲染得出的效果卻是這樣子的： lol~
【案例二】：現在我們來修改一下我們的 css 代碼：
我們會驚奇的發現，現在得到的結果正是我們想要的：HHH~
【案例三】：正當我們高興的時候，小明同學突然問道：那把外邊那一層 .wrap 注釋掉呢，還會一樣嗎？（你可以暫時別管小明是誰）
就這樣，我們又回到了最初的起點，子元素的高度依然沒有體現出來，得到的效果如下：
===================== 下面我們就來分析一波 ====================
其實，。。。。。
(1). 百分比的大小是相對其父級元素寬高的大小，如最外層元素設置的百分比是對應屏幕而言的。
(2). 對於寬度來說，其父級元素無須確定寬度就能設置百分比； 但高度則不同，若某元素的父元素沒有確定高度，則無法有效使用height=XX%的樣式！！！
[分析]: 案例二中，從最底層至最上層html都設置了百分數，html找屏幕寬度，body找html,body的兒子.wrap 找body....所以雖然都是百分比，但是他們最終找的其實都是屏幕寬度，
但是， 案例三中，.father找 .wrap 時，發現父級的高度並沒有給出，所以此時 .father 百分比的高度不能生效，.son 也就當然不能生效了。
=============================================================
所以：
- 在html中, 一個塊級元素, 不給寬, 他就是瀏覽器的寬, 不給高, 他就是子元素的高. 所以塊級元素的高是由子元素撐開的；
- 一個子元素的高是百分數時, 就是相對他父盒子的百分比的高. 前提是他的父盒子得有高， 就從html, body開始一直向下, 把高都設置成百分數(案例二)；
- 一個子元素的高是百分數時, 如果父級的高是個具體值(px,rem之類)，子元素的高就會直接生效，而沒有必要追溯到html.body...的每一層父盒子(案例四)。
【案例四】：父元素高度為具體值，子元素高度為百分比，css 樣式如下：(div是塊元素，默認寬度為屏幕的100%，所以可以省略)
這樣就最終得到了我們想要的效果，如下：
