建站
咨詢
售后
建站咨詢
新聞中心
CSS 中calc()神技
眾所周知，CSS有一個特殊的calc()函數(shù)，用于做基本的數(shù)學(xué)運算。
企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對外擴(kuò)展宣傳的重要窗口，一個合格的網(wǎng)站不僅僅能為公司帶來巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺，成都創(chuàng)新互聯(lián)公司面向各種領(lǐng)域：成都效果圖設(shè)計等網(wǎng)站設(shè)計、全網(wǎng)營銷推廣解決方案、網(wǎng)站設(shè)計等建站排名服務(wù)。
demo：
讓我們來詳細(xì)的學(xué)習(xí)一下這個功能吧:
calc()函數(shù)只能在值中使用。
demo:
也可以在部分屬性的內(nèi)部作為單獨的值使用.
demo:
它甚至可以成為構(gòu)成屬性一部分的另一個功能的一部分！例如，這里的calc() 用于漸變的色標(biāo)中.
demo:
calc() 可以將不同的單位混合在一起 .
demo:(在sass中)
例如：假設(shè)我們需要寫定一個父盒子的7分之一的寬度的盒子；
calc() 中可以使用加減乘除 , 但他們在使用方法上有所不同。
加法(+)和減法(-)要求這兩個數(shù)都是長度
除法(/)要求第二個數(shù)字是無單位的
css的calc方法主要用途是什么呢？
1. 執(zhí)行數(shù)學(xué)運算
CSS3 的 calc() 函數(shù)允許我們在屬性值中執(zhí)行數(shù)學(xué)操作。例如，我們可以使用 calc() 指定一個元素寬的固定像素值為多個數(shù)值的和。
2. 實現(xiàn)居中效果
使用 calc() 給我們提供另一個垂直居中元素的解決方案。如果我們知道元素的尺寸，一個典型的解決方案是使用負(fù)外邊距移動自身距離高與寬的一半
3. 創(chuàng)建根柵格尺寸
使用 rem，calc() 函數(shù)能夠用來創(chuàng)建一個基于視口的柵格。我們可以設(shè)置根元素的字體大小作為視口寬度的一部分。
4. 提高計算清晰度
使用 calc()，我們還能做很多的事情，它是 CSS 中很有用的新特性之一。
css3中的calc是不是可以用于表示除不盡的數(shù)
學(xué)習(xí)calc()之前，我們有必要先知道calc()是什么？只有知道了他是個什么東東？在實際運用中更好的使用他。
calc()從字面我們可以把他理解為一個函數(shù)function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動態(tài)值。為何說是動態(tài)值呢?因為我們使用的表達(dá)式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。
calc()能做什么？
calc()能讓你給元素的做計算，你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務(wù)交由瀏覽器去計算。
calc()語法
calc()語法非常簡單，就像我們小時候?qū)W加 （+）、減（-）、乘（*）、除（/）一樣，使用數(shù)學(xué)表達(dá)式來表示：
.elm?{
width:?calc(expression);
}
其中"expression"是一個表達(dá)式，用來計算長度的表達(dá)式。
calc()的運算規(guī)則
calc()使用通用的數(shù)學(xué)運算規(guī)則，但是也提供更智能的功能：
使用“+”、“-”、“*” 和 “/”四則運算；
可以使用百分比、px、em、rem等單位；
可以混合使用各種單位進(jìn)行計算；
表達(dá)式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
表達(dá)式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。
瀏覽器的兼容性
瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持，同樣需要在其前面加上各瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有“firefox for android 14.0”支持，其他的全軍覆沒。
大家在實際使用時，同樣需要添加瀏覽器的前綴
.elm?{
/*Firefox*/
-moz-calc(expression);
/*chrome?safari*/
-webkit-calc(expression);
/*Standard?*/
calc();
}
通過上面的了解，大家對calc()不在那么陌生，但對于實際的運用可能還是不太了解，那么大家就接下來跟我一起動手，通過實例來了解他吧。首先我們來看一個最常用的實例：
div?class="demo"
div?class="box"/div
/div
上面的結(jié)構(gòu)很簡單，就是一個div.demo的元素中包含了一個div.box的元素，接下來我們一步一步來看其中的變化。
第一步：添加普通樣式：
.demo?{
width:?300px;
background:?#60f;
}
.box?{
width:?100%;
background:?#f60;
height:?50px;
}
此時的效果很簡單，就是div.box完全遮蓋了div.demo，如下圖所示：
第二步，在div.box上添加border和padding
這一步很棘手的事情來了，在div.box上添加10px的內(nèi)距padding，同時添加5px的border：
.demo?{
width:?300px;
background:?#60f;
}
.box?{
width:?100%;
background:?#f60;
height:?50px;
padding:?10px;
border:?5px?solid?green;
}
為了更好的說明問題，我在div.demo上添加了一個padding：3px 0;
.demo?{
width:?300px;
background:?#60f;
padding:?3px?0;
}
.box?{
width:?100%;
background:?#f60;
height:?50px;
padding:?10px;
border:?5px?solid?green;
}
這個時候大家不知道能否想到問題會發(fā)生在哪？其實很簡單，這個時候div.box的寬度大于了其容器div.demo的總寬度，從而撐破容器伸出來了，如圖所示：
詳細(xì)介紹css中的數(shù)學(xué)表達(dá)式calc()
很多時候跟著書和不系統(tǒng)的視頻學(xué)習(xí)，會發(fā)現(xiàn)沒有方向，學(xué)了很多卻不知道自己能夠做出什么成績。
學(xué)習(xí)要有一個清晰的職業(yè)學(xué)習(xí)規(guī)劃，學(xué)習(xí)過程中會遇到很多問題，你可以到我們的web學(xué)習(xí)交流君羊- 點擊此處 ，
同時準(zhǔn)備了基礎(chǔ)，進(jìn)階學(xué)習(xí)資料。學(xué)友都會在里面交流，分享一些學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，每天也會準(zhǔn)時講一些項目實戰(zhàn)案例。
數(shù)學(xué)表達(dá)式calc()是CSS中的函數(shù)，主要用于數(shù)學(xué)運算。使用calc()為頁面元素布局提供了便利和新的思路。相關(guān)視頻教程推薦：
定義
數(shù)學(xué)表達(dá)式calc()是calculate計算的縮寫，它允許使用+、-、*、/這四種運算符，可以混合使用%、px、em、rem等單位進(jìn)行計算
兼容性: IE8-、safari5.1-、ios5.1-、android4.3-不支持，android4.4-4.4.4只支持加法和減法。IE9不支持用于backround-position
注意：+和-運算符兩邊一定要有空白符
實例如下：
應(yīng)用
數(shù)學(xué)表達(dá)式calc()常用于布局中的不同單位的數(shù)字運算
以上就是詳細(xì)介紹css中的數(shù)學(xué)表達(dá)式calc()的詳細(xì)內(nèi)容，
相關(guān)鏈接：
css基礎(chǔ)之flex布局
css如何實現(xiàn)邊框長度控制功能
關(guān)于書籍：需要學(xué)習(xí)資料的小伙伴們可以加群， 點擊此處
文章標(biāo)題：css樣式calc,dreamweaverCSS樣式
網(wǎng)站路徑：http://www.ef60e0e.cn/article/dscdohj.html
