calc()可以做什麼？實現css的靈活佈局-css教學-PHP中文網

首頁

web前端

css教學

calc()可以做什麼？實現css的靈活佈局

Nov 01, 2018 pm 04:03 PM

calc() css3 自適應佈局

這篇文章帶給大家的內容是介紹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()可以做什麼？實現css的靈活佈局