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

CodeSheep 發布于2019-08-02 15:35 / 2994人閱讀

摘要：這里設置了根元素的值后出現了一個問題就是原因因為這些值是根據當前元素的來設置的，所以只要把父元素的設置為瀏覽器的默認值就可以了。

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

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

這里設置了display:inline出現了幾個問題：

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

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

2.元素的高度是跟隨這當前元素的font-size來變化的

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

3.line-height：父元素的高度這樣設置會出現偏移

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

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

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

然后再設置盒子的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;
    }

只要根據盒子的數量來調整margin-left的大小就可以了。

這里設置了根元素html的font-size值后出現了一個問題：就是

原因：因為這些值是根據當前元素的font-size來設置的，所以只要把父元素的font-size設置為瀏覽器的默認值就可以了。

云服務器 GPU云服務器水平垂直居中實現垂直居中 html的水平居中 js兩個一樣的id

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54229.html

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

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

jsbintask 2019-08-30 11:27 評論0 收藏0
CSS學習（二）

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

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

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

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

摘要：層疊性發生的前提樣式沖突優先級權重行內引入標簽通用把權重相加，值越大越有先權重一樣，后面的樣式起作用補充知識筆記表單優化寫法用戶名格式化列表圖標表單合并設置表格邊框合并，適用于表格格式化上下文默認值。 1.通用屬性 name：名稱，可以重復，可以一樣; class：類名，可以重復，也可以擁有多個，給CSS用的；如; id：唯一標示，不能重復，一般多用在JavaScript中；命名規...

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

摘要：層疊性發生的前提樣式沖突優先級權重行內引入標簽通用把權重相加，值越大越有先權重一樣，后面的樣式起作用補充知識筆記表單優化寫法用戶名格式化列表圖標表單合并設置表格邊框合并，適用于表格格式化上下文默認值。 1.通用屬性 name：名稱，可以重復，可以一樣; class：類名，可以重復，也可以擁有多個，給CSS用的；如; id：唯一標示，不能重復，一般多用在JavaScript中；命名規...

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