版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012194956/article/details/79864008
到目前为止,我并没有用过这个属性,对于前端,我仍然处于一个被动接受新知识的阶段。所了解的东西也都是冰山一角。前几天看到面试有人被问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>
效果:
完美!