兩個(gè)盒子垂直水平居中，并且相距距離一樣的實(shí)現(xiàn)

jsbintask 發(fā)布于2019-08-30 11:27 / 969人閱讀

摘要：這里設(shè)置了根元素的值后出現(xiàn)了一個(gè)問題就是原因因?yàn)檫@些值是根據(jù)當(dāng)前元素的來設(shè)置的，所以只要把父元素的設(shè)置為瀏覽器的默認(rèn)值就可以了。

現(xiàn)在很多網(wǎng)頁都會(huì)有那種類似于Grid布局的布局，今天我就自己試試寫一個(gè)出來，具體效果圖如下：

一、首先是一個(gè)盒子的垂直水平居中：

這里設(shè)置了display:inline出現(xiàn)了幾個(gè)問題：

1.長(zhǎng)寬高不能設(shè)置了，margin-top/bottom不能設(shè)置

解決辦法：將盒子設(shè)置會(huì)border-box,用padding來撐開

2.元素的高度是跟隨這當(dāng)前元素的font-size來變化的

解決辦法：每個(gè)元素設(shè)置一個(gè)font-size(這樣有一點(diǎn)冗余)

3.line-height：父元素的高度這樣設(shè)置會(huì)出現(xiàn)偏移

解決辦法：line-height的值 = 父元素的高度 - padding-bottom的值

一個(gè)盒子居中了，那么兩個(gè)怎么弄呢，并且他們相隔的距離要一樣的
1.一開始我的思路使用margin-left:百分比的方法，但是他這百分比不會(huì)隨著父元素的大小變化而變化。
2.然后我換了一種思路：用rem來動(dòng)態(tài)設(shè)置距離的值

首先通過JS代碼設(shè)置根元素的font-size大小

然后再設(shè)置盒子的margin-left的值

JS代碼：

   var rootSize = document.querySelector("body").clientWidth / 7.5;
   document.querySelector("html").style.fontSize = rootSize + "px"

css代碼：

   .parent{
      border:1px solid red;
      width:100%;
      height: 300px;
      font-size: 16px; 
    }
    .box{
      font-size: 16px;     
      border: 1px solid black;
      display: inline;
      padding-left:100px;
      padding-bottom:80px;
      margin-left: 2rem;
      line-height: 220px;
    }

只要根據(jù)盒子的數(shù)量來調(diào)整margin-left的大小就可以了。

這里設(shè)置了根元素html的font-size值后出現(xiàn)了一個(gè)問題：就是

原因：因?yàn)檫@些值是根據(jù)當(dāng)前元素的font-size來設(shè)置的，所以只要把父元素的font-size設(shè)置為瀏覽器的默認(rèn)值就可以了。