CSS3 响应式布局神器 calc()函数的妙用

通过 CSS3 的calc()函数布局实现类似“聚焦”效果，向Web前端设计者生动形象地展现了CSS3 calc()精彩绝伦的用途，加深了对calc()布局功能的印象。

calc()函数语法

calc() = calc(四则运算)

calc()函数说明

• 用于动态计算长度值；
• 运算符前后都需要保留一个空格，例如：width:calc(100% - 10px);；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持"+", "-", "*", "/" 运算；
• calc()函数使用标准的数学运算优先级规则；

calc()函数兼容性

IE9+，现代浏览器均支持。

calc()效果演示

/*主要CSS代码*/
.company-card {
	width:320px;
	height:80px;
    padding: 16px 20px;
    position: relative;
    border: 1px solid #fff;
    z-index: 1;
	background:red;/*红-仅作区分用*/
}
.company-card:after, .company-card:before {
    content: "";
    display: block;
    position: absolute;
    background-color: #fff;
    z-index: -1;
}
.company-card:before {
    height: calc(100% + 2px);
    width: calc(100% - 16px);
    top: -1px;
    left: 8px;
	background:blue;/*蓝-仅作区分用*/
}

.company-card:after {
    height: calc(100% - 16px);
    width: calc(100% + 2px);
    top: 8px;
    left: -1px;
	background:yellow;/*黄-仅作区分用*/
}
.company-card:hover {
    border-color: #000;/*聚焦边缘颜色*/
}

<!--主要HTML代码-->
<div class="company-card">
为了演示DIV容器的z-index(层序)，给DIV容器填充了颜色……通过 CSS3 calc()函数巧妙地实现了“聚焦”特效
</div>

CSS代码效果说明

红色DIV容器是父容器，黄色容器和蓝色容器分别是:after伪类、:before伪类创建的容器；

将黄色DIV容器的宽度在父容器的宽度基础上(块级元素100%)+2px，通过相对父容器的绝对定位left左边距-1px实现左右两侧的覆盖；

将蓝色DIV容器的高度在父容器的高度基础上(块级元素100%)+2px，通过相对父容器的绝对定位top上边距-1px实现上下两侧的覆盖；

calc()总结

通过布局实践，calc()函数的优点在于让Web前端人员不需要知道父容器具体的width/height就可以实现CSS绝美布局，calc()不愧是响应式神器！