padding和margin的百分比的像素基準(zhǔn)是誰(shuí)

padding和margin的百分比的像素基準(zhǔn)是其父元素的寬度。
基于這個(gè)特點(diǎn)來(lái)做個(gè)題,
寫代碼:css div 垂直水平居中,并完成 div 高度永遠(yuǎn)是寬度的一半(寬度可以不指定);

<div class="outer">
    <div class="inner">
      <div class="box">hello</div>
    </div>
  </div>
.outer {
  width: 600px;
}

.inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  background: red;
}

.box {
  position: absolute;
  width: 100%;
  height: 100%;
}

由于padding和margin的百分比的像素基準(zhǔn)是其父元素的寬度。
其中 .box 就是容器,此時(shí)實(shí)現(xiàn)了 div 高度永遠(yuǎn)是寬度的一半(寬度可以不指定)

css div 垂直水平居中,這個(gè)就老生常談了
給 .outer 增加樣式

// 服務(wù)于垂直居中
    height: 100%;
// 水平居中
    margin: 0 auto;
    display: flex;
// 子元素垂直居中
    align-items: center;

此時(shí)實(shí)現(xiàn) div.box 垂直水平居中,并完成 div.box 高度永遠(yuǎn)是寬度的一半(寬度可以不指定);

.outer {
  width: 600px;
  height: 100%;
  background: rgb(225, 225, 235);
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  background: red;
}

.box {
  position: absolute;
  width: 100%;
  height: 100%;
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容