DIV CSS 佈局教程網

之前，我們想要實現一個完美的寬度自適應的輸入框好麻煩，曾經也被作為對前端技術的一個挑戰。類似的常見場景還有100%寬+邊框的容器等。遇到這些情況，我們不得不分外小心，因為各個浏覽器的表現可能不一致。

現在，Firefox和webkit相繼支持calc()功能了，我們也可以學習下了。

calc()是干嘛的？

calc()是單詞calculate(計算)的縮寫，是CSS3的一個新的長度單位功能，可以使用簡單的數學運算。

嗯，CSS3越來越高級了。

運算規則

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

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

實例：

我們來看幾個小例子來理解下calc()功能吧：

1
2
3
4

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

容器寬度加上邊框寬度正好100%。

1
2
3

.box{
width:calc(10em+20px)
}

寬度，10em加20px。

1
2
3
4
5
6
7

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

3欄等寬布局。

浏覽器支持

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

所以如果我們要用這個屬性的話，要記得帶上各浏覽器的兼容性。