calc 與 box-sizing 的替代

ivydom 發布于2019-08-28 18:26 / 2224人閱讀

摘要：背景之前發現這個布局新屬性之后就非常喜歡，愛不釋手。語法取值說明元素的寬度高度等于元素邊框寬度加上元素內邊距加上元素內容寬度高度即。元素的寬度高度等于元素內容的寬度高度。

背景

之前發現calc這個布局新屬性之后就非常喜歡，愛不釋手。在公司的實習的時候，開發微信端的頁面，使用了幾次calc，后來發現在Android的上的不支持～蛋疼。于是到處找替代方案，終于在stackoverflow上找到一個滿意的答復，好～接下來進入正文～

calc 與 box-sizing 簡單介紹 calc 屬性

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

calc()的運算規則：

使用“+”、“-”、“*” 和 “/”四則運算;

可以使用百分比、px、em、rem等單位；

可以混合使用各種單位進行計算；

表達式中有“+”和“-”時，其前后必須要有空格，如"width: calc(12%+5em)"這種沒有空格的寫法是錯誤的；

表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。

兼容性

瀏覽器對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
sideBar
content


//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;
}

最后記

第一篇通過解決自己遇到的問題而來的文章～

參考資料：

CSS3的calc()使用

CSS3 Box-sizing

Stackoverflow的問答

WilsonLiu"s blog首發地址：http://blog.wilsonliu.cn

GPU云服務器云服務器 webrtc的替代方案 webrtc的替代者替代cdn的技術是什么云服務替代服務器的好處

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

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

CSS 盒模型與box-sizing

摘要：一盒模型一個頁面由許多元素組成，而每一個元素都可以表示為一個矩形的盒子，盒模型正是描述這些矩形盒子的存在。外邊距區域用空白區域擴展邊框區域，以分開相鄰的元素。的開源框架就全局設置了，由此可見盒模型的是比較受歡迎的。一、盒模型一個web頁面由許多html元素組成，而每一個html元素都可以表示為一個矩形的盒子，CSS盒模型正是描述這些矩形盒子的存在。 MDN的描述： When laying...

番茄西紅柿 2019-04-23 13:42 評論0 收藏0
七種實現左側固定，右側自適應兩欄布局的方法

摘要：總結一下左邊固定，右邊自適應的兩欄布局的七種方法。基本的樣式是，兩個相距左側寬基本的樣式是，兩個盒子相距左側盒子寬，右側盒子寬度自適應。沒有清除浮動的方法，若左側盒子高于右側盒子，就會超出父容器的高度。總結一下左邊固定，右邊自適應的兩欄布局的七種方法。其中有老生常談的float方法,BFC方法，也有CSS3的flex布局與grid布局。并非所有的布局都會在開發中使用，但是其中也會涉及...

luffyZh 2019-08-29 13:11 評論0 收藏0
border-sizing屬性詳解和應用

摘要：用于更改用于計算元素寬度和高度的默認的盒子模型。它有和三種取值。和屬性包括內容，內邊距和邊框，但不包括外邊距。所以，的解釋很符合常理。使用建議使用建議根據項目中的使用經驗和的建議，推薦將屬性設置為。個人網站原文鏈接屬性詳解和應用 box-sizing用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。inheri...

Batkid 2019-04-23 13:30 評論0 收藏0
20 個 CSS 高級技巧匯總

摘要：當然，如果你的新元素有兄弟元素的話，也可以使用通用的兄弟選擇符頁面頂部陰影下面這個簡單的代碼片段可以給網頁加上漂亮的頂部陰影效果給添加行高你不需要分別添加到每個標記等。使用技巧會讓人變的越來越懶，沒錯，我就是想讓你變懶。下面是我收集的CSS高級技巧，希望你懶出境界。 1. 黑白圖像這段代碼會讓你的彩色照片顯示為黑白照片，是不是很酷？ img.desaturate { fil...

Java3y 2019-08-28 18:21 評論0 收藏0
20 個常用的 CSS 技巧

摘要：所有一切都垂直居中要將所有元素垂直居中，太簡單了看，是不是很簡單。優化顯示文本有時，字體并不能在所有設備上都達到最佳的顯示，所以可以讓設備瀏覽器來幫助你注請負責任地使用。偶然看到一篇文章介紹了這些css技巧，覺得挺不錯的，分享給大家，話不多少，上代碼。 1、黑白圖像這段代碼會讓你的彩色照片顯示為黑白照片，是不是很酷？ img.desaturate { filter: gr...

chanthuang 2019-08-29 10:56 評論0 收藏0