引言
書寫頁面樣式與布局是前端工程師Coding 中必不可少的一項工作，在定義頁面元素的樣式時，padding 屬性也是經常被使用到的。
padding 屬性用於設置元素的內邊距，其值可以是length、inherit，當然也可以是百分比。
今天為什么會聊到padding-top設置百分比時的參考對象這個話題呢，這還要從一道不那么正經的面試題說起~
一道不那么正經的css布局面試題
在對面，一本正經的面試官和藹可親的說道：我們來道簡單的面試題，寫寫代碼吧。你一臉微笑的說道：好噠。
題目須知：
頁面中有一個元素A，請實現以下需求：
- 元素A在頁面內水平、垂直居中；
- 元素A距離頁面左右的間距為10px，元素A的寬度隨頁面寬度變大而變大；
- 設置元素A的高度始終為寬度的一半；
只要是對CSS了解的一些的同學，實現1和2都是非常簡單的，而且方式也是多種多樣的。那如何能設置讓元素A的高度始終為寬度的一半呢？上代碼~
頁面布局：要考慮DOM的結構和CSS的樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
/* 設置子元素A垂直水平居中 */
display: flex;
align-items: center;
justify-content: center;
}
.a {
/* 設置margin左右間距為10px */
margin: 0 10px;
background: #F00;
/* 設置寬度為100vw，實際寬度會受到彈性盒子的影響 */
width: 100vw;
/* calc方法動態計算：height的值為寬度的1/2，所以是 (100vw - 20px) / 2 */
height: calc(50vw - 10px);
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
在上述的代碼中我們借助calc方法實現了設置元素的高度為寬度的1/2
此時內心是否有些竊喜，又搞定了一個問題，飽含自信(傲嬌)的目光看向了面試官。
然而，當你沒有get到面試官的G點時，面試官又和藹可親（冷若冰霜）的說道“還有別的方法嗎？”
還能有啥別的辦法呢？你無助的捋了捋自己那為數不多的秀發。
啦啦啦，快來使用padding-top，哼哼哈嘿...
探究padding-top的秘密
當padding-top的值為百分比時，參考的對象是父級元素的寬度
這句話圈起來，是重點，要考~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
/* 設置子元素A垂直水平居中 */
display: flex;
align-items: center;
justify-content: center;
}
.a {
/* 設置margin左右間距為10px */
margin: 0 10px;
background: #F00;
/* 設置寬度為100%，父級容器寬度的100%，實際寬度會受到彈性盒子的影響 */
width: 100%;
height: 0;
/* calc方法動態計算：padding-top的值為父級容器寬度的1/2，所以是 (100vw - 20px) / 2 */
padding-top: calc(50% - 10px);
}
</style>
</head>
<body>
<div class="a"></div>
</body>
</html>
此處也可以選擇使用
padding-bottom
此刻你再抬頭時，看到了面試官那飽含了心滿意足、孺子可教的熱烈眼神...
最后的秘密
當padding-top、padding-bottom、margin-top、margin-bottom屬性設置為百分比時，參考對象都是父級元素的寬度
要記住呀，下回還得考~
后記
以上就是胡哥今天給大家分享的內容，喜歡的小伙伴記得點贊、收藏呦，關注胡哥有話說，學習前端不迷路，歡迎多多留言交流...
胡哥有話說，專注於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！