calc()可以做什麼？實現css的靈活佈局
- 青灯夜游原創
- 2018-11-01 16:03:152834瀏覽
這篇文章帶給大家的內容是介紹calc()可以做什麼？實現css的靈活佈局。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
建立一個漂亮的CSS自適應佈局首先要為Web應用程式中的所有內容分配好大小空間。一個高度的特徵要求擁有可以混合使用長度單位來指定尺寸的能力。
例如，如何能夠保留50％的面積，再加上固定的空間量（例如10px）？
在以前，我們需要設定很複雜的css樣式才可以實現上述的效果，但現在使用calc()屬性就可以輕鬆的做到這一點。
而且，我們可以在任何使用到長度或數字的地方使用calc()屬性，例如可以使用calc()來定位事物或設定rgb()顏色值，因此它在樣式表中有很多很好的用途。
下面我們來介紹一下css3的新增屬性calc()是如何實現靈活佈局的。 【推薦影片學習：css3教學】
calc（）可以做什麼？
calc()屬性可用於樣式表中CSS長度或數字的任何位置。具體關於calc()的使用，在之前的文章【calc怎麼用？ 】，有詳細的介紹，大家有需要可以參考一下。
calc()函數提供了兩個主要功能，使佈局變得更靈活： 混合百分比和絕對值、混合單位的使用。
將百分比與絕對單位混合
我們來看一個用絕對單位混合百分比的例子。假設我們想要分配50％的可用區域減去固定數量的像素，那麼我們可以這樣寫：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.demo {
width: 400px;
/*height: 200px;*/
border: 1px solid #000;
margin: 100px auto;
}
.cx {
width: calc(100% - 100px);
background-color: palevioletred;
}
</style>
</head>
<body>
<div class="demo">
<div class="cx">这是一段测试文字，背景颜色总是比总面积的50%还要小100像素</div>
</div>
</html>如果它的背景顏色為紅色，它看起來像：
如果縮小父級大小，它看起來像：
#我們可以看出，使用calc()的好處是很明顯的。透過這種方式可以組合不同的值類型，在Web應用程式能夠處理不同大小的裝置上的佈局，並且比以前具有更大的控制性。
混合單位的使用
另一個好處是能夠將具有不同測量值的單位組合起來以獲得最終尺寸。例如，可以透過混合“em”和“px”單位來設定相對於目前字體大小的大小。
.bar {
height: calc(10em + 3px);
}下面我們來看一個很好的組合值範例。
使用calc（）時，可以透過、-、*和/符號來進行添加、減去、乘和除值的運算，從而實現各種可能性。可以把Calc()用在任何地方，例如：計算和設定CSS長度或數字。我們也可以在計算角和頻率中使用Calc（）。
註：calc()屬性想在Chrome 19（Dev通道建置）中使用要新增-webkit-前綴，在Firefox中自版本8之後要-moz-前綴後使用，在Internet Explorer的版本9之後可以不添加前綴的使用。
總結：以上就是這篇文章所介紹的使用css3的calc()屬性實現css靈活佈局的全部內容，希望能對大家的學習有所幫助。
以上是calc()可以做什麼？實現css的靈活佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！