成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

calc 與 box-sizing 的替代

ivydom / 2253人閱讀

摘要：背景之前發(fā)現(xiàn)這個(gè)布局新屬性之后就非常喜歡，愛不釋手。語法取值說明元素的寬度高度等于元素邊框?qū)挾燃由显貎?nèi)邊距加上元素內(nèi)容寬度高度即。元素的寬度高度等于元素內(nèi)容的寬度高度。

背景

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

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

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

calc()的運(yùn)算規(guī)則：

使用“+”、“-”、“*” 和 “/”四則運(yùn)算;

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

可以混合使用各種單位進(jìn)行計(jì)算；

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

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

兼容性

瀏覽器對(duì)calc()的兼容性還算不錯(cuò)，在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持，同樣需要在其前面加上各瀏覽器廠商的識(shí)別符，不過可惜的是，移動(dòng)端的瀏覽器還沒僅有“firefox for android 14.0”支持，其他的全軍覆沒。

box-sizing

語法

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

取值說明

border-box：元素的寬度/高度（width/height）等于元素邊框?qū)挾龋╞order）加上元素內(nèi)邊距（padding）加上元素內(nèi)容寬度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。

content-box：元素的寬度/高度等于元素內(nèi)容的寬度/高度。
兼容性

布局比較

相比于box-sizing而言 calc的Android browser的支持性太差了，所以布局的時(shí)候，box-sizing可以用來解決calc的問題

//html


content



//css
  //使用calc
.content {
  width: 65%；  //照顧Android 平穩(wěn)退化
  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

之后在工作中，發(fā)現(xiàn)bootstrap的源碼有這么一段代碼～
box-sizing這個(gè)貨還是非常有用的呀～

* {
  -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首發(fā)地址：http://blog.wilsonliu.cn

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

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

相關(guān)文章

  • CSS 盒模型與box-sizing

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

    番茄西紅柿 評(píng)論0 收藏0

  • 七種實(shí)現(xiàn)左側(cè)固定，右側(cè)自適應(yīng)兩欄布局的方法

    摘要：總結(jié)一下左邊固定，右邊自適應(yīng)的兩欄布局的七種方法?；镜臉邮绞?，兩個(gè)相距左側(cè)寬基本的樣式是，兩個(gè)盒子相距左側(cè)盒子寬，右側(cè)盒子寬度自適應(yīng)。沒有清除浮動(dòng)的方法，若左側(cè)盒子高于右側(cè)盒子，就會(huì)超出父容器的高度。 總結(jié)一下左邊固定，右邊自適應(yīng)的兩欄布局的七種方法。其中有老生常談的float方法,BFC方法，也有CSS3的flex布局與grid布局。并非所有的布局都會(huì)在開發(fā)中使用，但是其中也會(huì)涉及...

    luffyZh 評(píng)論0 收藏0

  • border-sizing屬性詳解和應(yīng)用

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

    Batkid 評(píng)論0 收藏0

  • 20 個(gè) CSS 高級(jí)技巧匯總

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

    Java3y 評(píng)論0 收藏0

  • 20 個(gè)常用的 CSS 技巧

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

    chanthuang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<