calc()可以做什么？实现css的灵活布局-tutorial css-php.cn

calc()可以做什么？实现css的灵活布局

青灯夜游

Lepaskan： 2018-11-01 16:03:15

asal

2850 orang telah melayarinya

本篇文章给大家带来的内容是介绍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>

Salin selepas log masuk

如果它的背景颜色为红色，它看起来像：