小編給大家分享一下如何使用CSS3中calc()寬度計(jì)算做響應(yīng)模式布局，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)泉州免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

瀏覽這個(gè)http://www.sitepoint.com站時(shí)，因?yàn)楹闷婵戳讼氯思覍懙拇a，結(jié)果發(fā)現(xiàn)了這行代碼，

于是就研究了一下，calc()從字面我們可以把他理解為一個(gè)函數(shù)function。其實(shí)calc是英文單詞calculate(計(jì)算)的縮寫，是css3的一個(gè)新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動態(tài)值。為何說是動態(tài)值呢?因?yàn)槲覀兪褂玫谋磉_(dá)式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計(jì)算得到元素的寬度。

calc()能做什么？

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

calc()語法

calc()語法非常簡單，就像我們小時(shí)候?qū)W加 （+）、減（-）、乘（*）、除（/）一樣，使用數(shù)學(xué)表達(dá)式來表示：

width: calc(expression);

其中”expression”是一個(gè)表達(dá)式，用來計(jì)算長度的表達(dá)式。

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

calc()使用通用的數(shù)學(xué)運(yùn)算規(guī)則，但是也提供更智能的功能：

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

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

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

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

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

瀏覽器的兼容性

我們來個(gè)例子，我們做一個(gè)三列并排的模塊，寬度按百分比、有padding值、有border值、還有margin-right，而且這三個(gè)值是px，

li{
float:left;

width:33.3333%;
height:50px;

padding:10px;
margin-right:10px;

background:#FF6666;
border:5px solid #DAC8A7;
}

效果圖：

它是不會好好并列的，在這種情況下就不好算了，就算算出來也有那么一點(diǎn)誤差，不是嗎？現(xiàn)在我們就用到了calc(),

li{
float:left;

//width:33.3333%;
height:50px;

padding:10px;
margin-right:15px;

background:#FF6666;
border:5px solid #DAC8A7;

width:calc(33.3333% - (10px + 5px) * 2 - 15px )

}

意思是(width-(padding+border)*2-margin)

現(xiàn)在可以并排了

好了，到這就告一段絡(luò)了，再稍微優(yōu)化一下左右邊15px的空距，讓兩邊都挨邊。就在父級上加個(gè)margin-right：-15px，OK 搞定

以上是“如何使用CSS3中calc()寬度計(jì)算做響應(yīng)模式布局”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！