【震驚】padding-top的百分比值參考物件竟是父級元素的寬度
阿新 • • 發佈:2020-12-17
## 引言
書寫頁面樣式與佈局是前端工程師```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```屬性設定為百分比時,參考物件都是父級元素的寬度
> 要記住呀,下回還得考~
## 後記
以上就是胡哥今天給大家分享的內容,喜歡的小夥伴記得```點贊```、```收藏```呦,關注胡哥有話說,學習前端不迷路,歡迎多多留言交流...
> 胡哥有話說,專注於大前端技術領域,分享前端系統架構,框架實現原理,最新最高效的技術