平時在製作頁面的時候，總會碰到有的元素是100%的寬度。眾所周知，如果元素寬度為100%時，其自身不帶其他盒模型屬性設定還好，要是有別的，那將導致盒子撐破。比如說，有乙個邊框，或者說有margin和padding，這些都會讓你的盒子撐破。我們換句話來說，如果你的元素寬度是100%時，只要你在元素中新增了border,padding,margin任何一值，都將會把元素盒子撐破（標準模式下，除ie怪異模式）。這樣一來就會相當的麻煩，平時我們碰到這樣的現象時，也是相當的謹慎，有時甚至無法解決，只能通過改變結構來實現。就算你通過繁瑣的方法實現了，但有於瀏覽器的相容性而導致最終效果不一致。雖然前面介紹的css3屬性中的box-sizing在一定程度上解決這樣的問題，其實今天的calc()函式功能實現上面的效果來得更簡單（解決自適應）。
什麼是calc()?
學習calc()之前，我們有必要先知道calc()是什麼？只有知道了他是個什麼東東？在實際運用中更好的使用他。
calc()從字面我們可以把他理解為乙個函式function。其實calc是英文單詞calculate(計算)的縮寫，是css3的乙個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值。為何說是動態值呢?因為我們使用的表示式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。
calc()能做什麼？
calc()能讓你給元素的做計算，你可以給乙個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說「width:calc(50% + 2em)」，這樣一來你就不用考慮元素div的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。
calc()語法
calc()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表示式來表示：
.elm
calc()的運算規則
calc()使用通用的數**算規則，但是也提供更智慧型的功能：
使用「+」、「-」、「*」 和 「/」四則運算；
可以使用百分比、px、em、rem等單位；
可以混合使用各種單位進行計算；
表示式中有「+」和「-」時，其前後必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
表示式中有「*」和「/」時，其前後可以沒有空格，但建議留有空格。
瀏覽器的相容性
瀏覽器對calc()的相容性還算不錯，在ie9+、ff4.0+、chrome19+、safari6+都得到較好支援，同樣需要在其前面加上各瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有「firefox for android 14.0」支援，其他的全軍覆沒。
大家在實際使用時，同樣需要新增瀏覽器的字首
.elm
第一步：新增普通樣式：
.demo
.box
第二步，在div.box上新增border和padding
這一步很棘手的事情來了，在div.box上新增10px的內距padding，同時新增5px的border：
.demo
.box
第三步，calc()的運用
為了解決撐破容器的問題，以前我們只能去計算div.box的寬度，用容器寬度減去padding和border的值，但有時候，我們苦於不知道元素的總寬度，比如說是自適應的布局，只知道乙個百分值，但其他的值又是px之類的值，這就是難點，死卡住了。隨著css3的出現，其中利用box-sizing來改變元素的盒模型型別實使實現效果，但今天我們學習的calc()方法更是方便。
知道總寬度是100%，在這個基礎上減去boder的寬度（5px * 2 = 10px）,在減去padding的寬度（10px * 2 = 20px），即"100% - (10px + 5px) * 2 = 30px" ，最終得到的值就是div.box的width值：
.demo
.box
上面是乙個簡單的例項，接下來我們一起來看乙個自適應布局的例子：
下面的demo是乙個非常簡單而常見的布局效果，在這個布局中，我採用了自適應布局。整個布局包含了「頭部」、「主內容」、「邊欄」和「腳部」，並且「主內容」居左，「邊欄」靠右，具體結構請看demo中的html部分。
接下來，我們主要看看css部分：
body
給不支援calc()的瀏覽器設定了乙個固定寬度值「1024px」。
3、給header和footer設定樣式
這個例子中的header和footer很簡單，給他們新增了乙個內距為20px，其他就是一些基本的樣式設定，那麼其對應的寬度應該是"100% - 20px * 2"：
#header
#footer
給主內容設定了乙個8px的邊框，20px的內距，並且向左浮動，同時設定了乙個向右的外邊距「20」px，關鍵之處，我們主內容佔容器寬度的75%，這樣一來，主內容的寬度應該是「75% - 8px * 2 - 20px * 2」:
#main
給邊欄設定了乙個25%的寬度，其除了包含8px的邊框，10px的內距外，還有主內容外距20px也要去掉，不然整個寬度與容器會相差20px,換句話說就會撐破容器掉下來。因此邊欄的實際寬度應該是"25% - 10px * 2 - 8px * 2 -20px":
#accessory
Flex屬性使用方法
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 任何乙個容器都可以指定為flex布局 注意，...
屬性列表的使用方法
1.建立乙個ios resource property list的屬性列表 2.pragma mark 解析屬性檔案資料 獲取檔案路徑 nsstring path nsbundle mainbundle pathforresource studentinformation oftype plist ...
css display屬性及使用方法
ie firefox chrome safari opera 支援支援 支援支援 支援所有主流瀏覽器都支援 display 屬性。注釋 如果規定了 doctype，則 internet explorer 8 以及更高版本 支援屬性值 inline table run in table table c...