久久经验网 > Web技术 > CSS3 响应式布局神器 calc()函数的妙用

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

CSS3 的calc()函数布局实现类似“聚焦”效果,向Web前端设计者生动形象地展现了CSS3 calc()精彩绝伦的用途,加深了对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()不愧是响应式神器!

相关分享

发表评论