calc 與 box-sizing 的替代

時間 2019-11-05

標籤 calc box sizing 替代简体版

原文原文鏈接

背景

以前發現calc這個佈局新屬性以後就很是喜歡，愛不釋手。在公司的實習的時候，開發微信端的頁面，使用了幾回calc，後來發如今Android的上的不支持～蛋疼。因而處處找替代方案，終於在stackoverflow上找到一個滿意的答覆，好～接下來進入正文～css

calc 與 box-sizing 簡單介紹

calc 屬性

calc()能讓你給元素的作計算，你能夠給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，好比說「width:calc(50% + 2em)」，這樣一來你就不用考慮元素DIV的寬度值究竟是多少，而把這個煩人的任務交由瀏覽器去計算。html

calc()的運算規則：android

使用「+」、「-」、「*」和「/」四則運算;css3
可使用百分比、px、em、rem等單位；web
能夠混合使用各類單位進行計算；bootstrap
表達式中有「+」和「-」時，其先後必需要有空格，如"width: calc(12%+5em)"這種沒有空格的寫法是錯誤的；瀏覽器
表達式中有「*」和「/」時，其先後能夠沒有空格，但建議留有空格。微信

兼容性ide

瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都獲得較好支持，一樣須要在其前面加上各瀏覽器廠商的識別符，不過惋惜的是，移動端的瀏覽器還沒僅有「firefox for android 14.0」支持，其餘的全軍覆沒。佈局

box-sizing

語法

box-sizing ： content-box || border-box || inherit

取值說明

border-box：元素的寬度/高度（width/height）等於元素邊框寬度（border）加上元素內邊距（padding）加上元素內容寬度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。
content-box：元素的寬度/高度等於元素內容的寬度/高度。
兼容性

佈局比較

相比於box-sizing而言 calc的Android browser的支持性太差了，因此佈局的時候，box-sizing能夠用來解決calc的問題

//html
<div class="sideBar">sideBar</div>
<div class="content">content</div>


//css
  //使用calc
.content {
  width: 65%；  //照顧Android 平穩退化
  width: calc(100% - 300px);
}

  //使用box-sizing
  .sideBar {
     position: absolute; 
     top:0;
     left:0;
     width: 300px;
}
.content {
    padding-left: 300px;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

以上的代碼來自於stackoverflow，很是棒的解決方案～

bootstrap中的box-sizing

以後在工做中，發現bootstrap的源碼有這麼一段代碼～
box-sizing這個貨仍是很是有用的呀～

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}