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


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

本站 CSS3 calc() 聚焦效果实现过程说明
本站 CSS3 calc() 聚焦效果实现过程说明
某网站上看到的 CSS3 calc() 聚焦效果
某网站上看到的 CSS3 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>
CSS3 响应式布局神器 calc()函数妙用
CSS3 响应式布局神器 calc()函数妙用

CSS代码效果说明

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

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

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

calc()总结

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


益享天开(久久经验网)网站的管理员“益享君”,欢迎一起分享、交流。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Post comment