## 引言 書寫頁面樣式與佈局是前端工程師```Coding``` 中必不可少的一項工作，在定義頁面元素的樣式時，```padding``` 屬性也是經常被使用到的。 ```padding``` 屬性用於設定元素的內邊距，其值可以是```length```、```inherit```，當然也可以是```百分比```。 今天為什麼會聊到```padding-top```設定百分比時的參考物件這個話題呢，這還要從一道不那麼正經的面試題說起~ ## 一道不那麼正經的css佈局面試題 在對面，一本正經的面試官和藹可親的說道：我們來道簡單的面試題，寫寫程式碼吧。你一臉微笑的說道：好噠。 #### 題目須知： 頁面中有一個元素A，請實現以下需求： 1. 元素A在頁面內水平、垂直居中； 2. 元素A距離頁面左右的間距為10px，元素A的寬度隨頁面寬度變大而變大； 3. 設定元素A的高度始終為寬度的一半； 只要是對CSS瞭解的一些的同學，實現1和2都是非常簡單的，而且方式也是多種多樣的。那如何能設定讓元素A的高度始終為寬度的一半呢？上程式碼~ > 頁面佈局：要考慮DOM的結構和CSS的樣式 ```html ``` > 在上述的程式碼中我們藉助calc方法實現了設定元素的高度為寬度的1/2 此時內心是否有些竊喜，又搞定了一個問題，飽含自信(**傲嬌**)的目光看向了面試官。 然而，當你沒有get到面試官的```G```點時，面試官又和藹可親（**冷若冰霜**）的說道“還有別的方法嗎？” 還能有啥別的辦法呢？你無助的捋了捋自己那為數不多的秀髮。 啦啦啦，快來使用```padding-top```，哼哼哈嘿... ## 探究padding-top的祕密 當padding-top的值為百分比時，參考的物件是父級元素的寬度 > 這句話圈起來，是重點，要考~ ```html ``` > 此處也可以選擇使用```padding-bottom``` 此刻你再抬頭時，看到了面試官那飽含了心滿意足、孺子可教的熱烈眼神... ## 最後的祕密 當```padding-top```、```padding-bottom```、```margin-top```、```margin-bottom```屬性設定為百分比時，參考物件都是父級元素的寬度 > 要記住呀，下回還得考~ ## 後記 以上就是胡哥今天給大家分享的內容，喜歡的小夥伴記得```點贊```、```收藏```呦，關注胡哥有話說，學習前端不迷路，歡迎多多留言交流... > 胡哥有話說，專注於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術