實(shí)現(xiàn)css靈活布局的方法

發(fā)布時(shí)間：2020-10-20 15:07:55 來源：億速云閱讀：175 作者：小新欄目：web開發(fā)

小編給大家分享一下實(shí)現(xiàn)css靈活布局的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)建一個(gè)漂亮的CSS自適應(yīng)布局首先要為Web應(yīng)用程序中的所有內(nèi)容分配好大小空間。一個(gè)高度的特征要求擁有可以混合使用長度單位來指定尺寸的能力。

例如，如何能夠保留50％的面積，再加上固定的空間量（例如10px）？

在以前，我們需要設(shè)置很復(fù)雜的css樣式才可以實(shí)現(xiàn)上述的效果，但現(xiàn)在使用calc()屬性就可以輕松的做到這一點(diǎn)。

而且，我們可以在任何使用到長度或數(shù)字的地方使用calc()屬性，比如可以使用calc()來定位事物或設(shè)置rgb()顏色值，因此它在樣式表中有很多很好的用途。

下面我們來介紹一下css3的新增屬性calc()是如何實(shí)現(xiàn)靈活布局的?！就扑]視頻學(xué)習(xí)：css3教程】

calc（）可以做什么？

calc()屬性可用于樣式表中CSS長度或數(shù)字的任何位置。具體關(guān)于calc()的使用，在之前的文章【calc怎么用？】，有詳細(xì)的介紹，大家有需要可以參考一下。

calc()函數(shù)提供了兩個(gè)主要功能，使布局變得更靈活：混合百分比和絕對值、混合單位的使用。

將百分比與絕對單位混合

我們來看一個(gè)用絕對單位混合百分比的例子。假設(shè)我們想要分配50％的可用區(qū)域減去固定數(shù)量的像素，那么我們可以這樣寫：

<!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>

如果它的背景顏色為紅色，它看起來像：

實(shí)現(xiàn)css靈活布局的方法

如果縮小父級大小，它看起來像：

實(shí)現(xiàn)css靈活布局的方法

我們可以看出，使用calc()的好處是很明顯的。通過這種方式可以組合不同的值類型，在Web應(yīng)用程序能夠處理不同大小的設(shè)備上的布局，并且比以前具有更大的控制性。

混合單位的使用

另一個(gè)好處是能夠?qū)⒕哂胁煌瑴y量值的單位組合起來以獲得最終尺寸。例如，可以通過混合“em”和“px”單位來設(shè)置相對于當(dāng)前字體大小的大小。

.bar {
  height: calc(10em + 3px);
}

下面我們來看一個(gè)很好的組合值例子。

實(shí)現(xiàn)css靈活布局的方法

使用calc（）時(shí)，可以通過+、-、*和/符號來進(jìn)行添加、減去、乘和除值的運(yùn)算，從而實(shí)現(xiàn)各種可能性。可以把Calc()用在任何地方，比如：計(jì)算和設(shè)置CSS長度或數(shù)字。我們也可以在計(jì)算角和頻率中使用Calc（）。

注：calc()屬性想在Chrome 19（Dev通道構(gòu)建）中使用要添加-webkit-前綴，在Firefox中自版本8之后要-moz-前綴后使用，在Internet Explorer的版本9之后可以不添加前綴的使用。

以上是實(shí)現(xiàn)css靈活布局的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

實(shí)現(xiàn)css靈活布局的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽