CSS3新特性——calc()

到目前为止，我并没有用过这个属性，对于前端，我仍然处于一个被动接受新知识的阶段。所了解的东西也都是冰山一角。前几天看到面试有人被问calc()，作为CSS3新特性之一，必然是有其存在的理由的。所以，我又开始各种google了。。。

不谈别的，先看看calc()的作用：自适应布局

仅仅是这一个作用，却解决了CSS最让人抓狂的难点，我觉得我说的一点都不过，布局这种东西，乍一看很简单，深入了发现又是一个新世界。面试官们在CSS上只会问两种问题：一是绘图，二是布局。然后什么CSS3新特性啊，position属性值啊什么的，记住了其实也没什么。综合能力考查的话用绘图和布局其实最公正。

calc()从字面上可以把它理解为一个函数，用来指定元素的长度，针对的属性可以是border，margin，padding，font-size，width等等。

语法：

/*property: calc(expression)*/
width:calc(100% - 80px);

其中，expression是一个数学表达式，该表达式的结果作为最终的值。可以使用四则运算符（+，-，*，/）的任意组合。但是有以下要求：

（1）+，- 运算符两边必须要有空白符

（2）* 运算符两个乘数中，至少要有一个是<number>类型

（3）/ 运算符右边的数（除数）必须是<number>类型

下面，具体给出实例。

1.水平垂直居中！

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>calc()</title>
	<style type="text/css">
		.outer{
			width:600px;
			height:300px;
			border:1px solid gray;
			position:relative;
		}
		.inner{
			position: absolute;
			left:calc(50px);
			width:calc(100% - 100px); /*注意-两边要有空格*/
			top:50px;
			height:calc(100% - 100px);
			background:red;
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner"></div>
	</div>
</body>
</html>

效果：

2.解决子元素可能会撑破父元素的问题。

首先来看看不使用calc()的效果：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>calc()</title>
	<style type="text/css">
		.outer{
			width:600px;
			height:300px;
			background:green;
			position:relative;
		}
		.inner{
			position:absolute;
			width:100%;
			height:200px;
			background: red;
			padding:10px;
			border:5px solid blue;
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner"></div>
	</div>
</body>
</html>

效果图：

可以很明显的看到，外层容器是绿色那一部分，内层背景色为红色，宽度设置100%，也就是占满了父元素的宽度，不仅如此，还额外设置了padding为10px，并且边框boder设置成了5px的蓝色。结果就是，在宽度上，子元素撑破了父元素。

now，让我们来完美地解决这个问题吧！

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>calc()</title>
	<style type="text/css">
		.outer{
			width:600px;
			height:300px;
			background:green;
			position:relative;
		}
		.inner{
			position:absolute;
			/*宽度上padding总和为10px*2,border总和为5px*2，然后保证子元素宽度占满父元素但不溢出*/
			width:calc(100% - (10px + 5px) * 2);
			height:200px;
			background:red;
			padding:10px;
			border:5px solid blue;
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner"></div>
	</div>
</body>
</html>

效果：

完美！

CSS3新特性——calc()

猜你喜欢