【震驚】padding-top的百分比值參考物件竟是父級元素的寬度

胡哥有話說發表於2020-12-17
padding物件

引言

書寫頁面樣式與佈局是前端工程師Coding 中必不可少的一項工作，在定義頁面元素的樣式時，padding 屬性也是經常被使用到的。

padding 屬性用於設定元素的內邊距，其值可以是length、inherit，當然也可以是百分比。

今天為什麼會聊到padding-top設定百分比時的參考物件這個話題呢，這還要從一道不那麼正經的面試題說起~

一道不那麼正經的css佈局面試題

在對面，一本正經的面試官和藹可親的說道：我們來道簡單的面試題，寫寫程式碼吧。你一臉微笑的說道：好噠。

題目須知：

頁面中有一個元素A，請實現以下需求：

  1. 元素A在頁面內水平、垂直居中；
  2. 元素A距離頁面左右的間距為10px，元素A的寬度隨頁面寬度變大而變大；
  3. 設定元素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屬性設定為百分比時，參考物件都是父級元素的寬度

要記住呀，下回還得考~

後記

以上就是胡哥今天給大家分享的內容，喜歡的小夥伴記得點贊、收藏呦，關注胡哥有話說，學習前端不迷路，歡迎多多留言交流...

胡哥有話說，專注於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！

相關文章