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

CodeSheep 發(fā)布于2019-08-02 15:35 / 2999人閱讀

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

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

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

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

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

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

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

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

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

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

一個盒子居中了，那么兩個怎么弄呢，并且他們相隔的距離要一樣的
1.一開始我的思路使用margin-left:百分比的方法，但是他這百分比不會隨著父元素的大小變化而變化。
2.然后我換了一種思路：用rem來動態(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)了一個問題：就是

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

GPU云服務(wù)器云服務(wù)器水平垂直居中實現(xiàn)垂直居中 html的水平居中 js兩個一樣的id

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54229.html

相關(guān)文章

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

摘要：這里設(shè)置了根元素的值后出現(xiàn)了一個問題就是原因因為這些值是根據(jù)當(dāng)前元素的來設(shè)置的，所以只要把父元素的設(shè)置為瀏覽器的默認(rèn)值就可以了。現(xiàn)在很多網(wǎng)頁都會有那種類似于Grid布局的布局，今天我就自己試試寫一個出來，具體效果圖如下： showImg(https://segmentfault.com/img/bVbviHT?w=1351&h=331); 一、首先是一個盒子的垂直水平居中： ...

jsbintask 2019-08-30 11:27 評論0 收藏0
CSS學(xué)習(xí)（二）

摘要：學(xué)習(xí)二一三大模型之盒子模型盒子模型每個矩形元素都由元素的內(nèi)容，內(nèi)邊距，邊框，和外邊距邊框盒子的厚度，如手機(jī)包裝盒的厚度內(nèi)邊距內(nèi)容與邊框之間的距離，如填充泡沫的厚度外邊距與其他盒子的距離邊框樣式格式單實線用的最多虛線點線雙實線邊框綜合寫法寫 CSS學(xué)習(xí)（二）一、CSS三大模型之盒子模型 1.盒子模型每個矩形元素都由元素的內(nèi)容，內(nèi)邊距，邊框，和外邊距邊框：盒子的厚度Border，如手...

Near_Li 2019-08-29 15:29 評論0 收藏0
想要清晰的明白（二）CSS 盒模型Block box與Line box

摘要：垂直格式化，有一個很重要的方面是會造成垂直相鄰?fù)膺吘嗪喜?，解決這個的方式見想要清晰的明白一中的部分。參考資料權(quán)威指南第三版為負(fù)值產(chǎn)生的影響和常見布局應(yīng)用布局圣杯布局雙飛翼布局深入理解和的基友關(guān)系深入理解中的行高在上一篇想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC比較宏觀的了解了盒子模型的作用，接下來就詳細(xì)的介紹兩種盒子的具體細(xì)節(jié) Block Box show...

Vicky 2019-08-30 13:03 評論0 收藏0
CSS簡潔筆記

摘要：層疊性發(fā)生的前提樣式?jīng)_突優(yōu)先級權(quán)重行內(nèi)引入標(biāo)簽通用把權(quán)重相加，值越大越有先權(quán)重一樣，后面的樣式起作用補(bǔ)充知識筆記表單優(yōu)化寫法用戶名格式化列表圖標(biāo)表單合并設(shè)置表格邊框合并，適用于表格格式化上下文默認(rèn)值。 1.通用屬性 name：名稱，可以重復(fù)，可以一樣; class：類名，可以重復(fù)，也可以擁有多個，給CSS用的；如; id：唯一標(biāo)示，不能重復(fù)，一般多用在JavaScript中；命名規(guī)...

yanbingyun1990 2019-08-02 16:00 評論0 收藏0
CSS簡潔筆記

摘要：層疊性發(fā)生的前提樣式?jīng)_突優(yōu)先級權(quán)重行內(nèi)引入標(biāo)簽通用把權(quán)重相加，值越大越有先權(quán)重一樣，后面的樣式起作用補(bǔ)充知識筆記表單優(yōu)化寫法用戶名格式化列表圖標(biāo)表單合并設(shè)置表格邊框合并，適用于表格格式化上下文默認(rèn)值。 1.通用屬性 name：名稱，可以重復(fù)，可以一樣; class：類名，可以重復(fù)，也可以擁有多個，給CSS用的；如; id：唯一標(biāo)示，不能重復(fù)，一般多用在JavaScript中；命名規(guī)...

FullStackDeveloper 2019-08-29 14:01 評論0 收藏0