CSS3 新属性 cacl()用法解析

**这是一个会计算的属性,特别适合对于自适应还不是很熟练的童鞋

calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。

以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意,两者只能使用一个哦,否则就会造成冲突了。

calc()可以使用数学运算中的简单加(+)、减(-)、乘()和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算,但是要
注意,使用运算符号的时候要与两边的值有空格和间隙,否则不识别,会报错 !*

============================开始代码============================




    
    Document
    


    

1>当使用第一种方法 不加 box-sizing 属性时

这是效果图,可以看到会有溢出撑开的情况

**
image

2>当使用第一种方法 加 box-sizing 属性时

这是效果图,可以看到不会被撑开 但是高度会变化

image

3>当使用第二种方法时

Duang!Duang!Duang!是不是很完美?与自己想要的结果完美一致

image

你可能感兴趣的:(CSS3 新属性 cacl()用法解析)