css3 calc()：css簡單的數學運算-加減乘除

css3 calc()：css簡單的數學運算–加減乘除

 

多好的東西啊，不用js，一個css就解決了。

.box{
border:1px solid #ddd;
width:calc(100% - 100px);
background:#9AC8EB;
}

3欄等寬布局

.box{
margin-left:20px;
width:calc(100%/3 - 20px);
}
.box:nth-child(3n){
margin-left:0;
}

運算規則

calc()使用通用的數學運算規則，但是也提供更智能的功能：

使用“+”“-”“*”“/”四則運算；
可以使用百分比、px、em、rem等單位；
可以混合使用各種單位進行計算。

瀏覽器支持

firefox 4.0+已經開支支持calc()功能，不過要使用-moz-calc()私有屬性，chrome從19 dev版，也開始支持私有的-webkit-calc()寫法，IE9這次則牛逼了一次，原生支持標准的不帶前綴的寫法了。Opera貌似還不支持～～

注意：
在http://www.qianduan.net/calc-at-at-at-page-intelligent-layout.html看到的，他的原文中width:calc(100%-100px)是沒有空格的，經測試無效，就像其評論中：calc()里面的表達式好像要注意格式。