能让前端技术人使用calc属性的,恐怕只有这一个原因

是不是还有人没有听过calc这个功能,或者说知道但从来没有用使用过它的。CSS3新增calc属性其实很简单,适应的场景情况也非常明确,不管怎么,看完这篇文章,你不仅会搞懂calc的使用,更重要的是知道使用calc功能原因只有一种情况:固定值与百分比相遇时。(举一个例子就会全明白)

一、calc的运算规则

1、可以使用+,-,*,/运算

2、可以使用百分比与px、em、rem单位运算

3、+,-时符号前后要有空格,*,/符号可以没有空格

二、举一个例子

【html结构代码】

让父元素div.parent为自适应宽度100%。高度为固定值150px时,来设置子元素的水平和垂直位置。

【css样式代码】

.parent {

width: 100%;

height:150px;

border: solid black 1px;

position: relative;

}

.child {

position: absolute;

left: 0;

height:50px;

top:calc(50% - 25px);

width: calc(100% - 100px);

background-color:red;

text-align: center;

}

重点注意top值和width值的设定。

首先是top值,实现了垂直居中,相当于以下两种处理方式的结果:

一种处理方式:

top:50%

margin-top:-25px

二种处理方式:

transform:translate(0,-50%)

那么区别在哪里呢?很明显看到方便计算和理解且灵活控制,再如上面设置子元素的宽度一样,当父元素宽度是100%时,我希望离右边框100px的距离时,直接通过运算(这种情况一般不借助脚本是不好控制的)。

注意一,如果元素出现magin,padding,border时,只要在表达中顺便相加减就行。而不需要在去倒腾什么box-sizing来改变盒子模型。

注意二,上面px也同样可以换成em等单位,可以自己测试。

三、上面代码的效果

总结一下:

calc的兼容也是可观的,简单点说就是通过表达式计算减少代码复杂度,解决当单位为百分比出现不好计算的问题。当固定值与百分比相遇时,可别忘了还有这个属性。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180731A08VL700?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券