做网站需要的电脑配置,wordpress 可以回复的表单插件,100平米美容院装修设计,搭建网站的空间哪里买一、前言 calc()看起来像是javascript中的一个函数#xff0c;而事实上它是用在Css中的#xff0c;可以用它来计算长度#xff08;宽度或高度)#xff0c;能够自动根据不同尺寸的屏幕自动调接数值#xff0c;从而很轻松的实现自适应布局展示在不同尺寸屏幕下。项目中常常碰…一、前言 calc()看起来像是javascript中的一个函数而事实上它是用在Css中的可以用它来计算长度宽度或高度)能够自动根据不同尺寸的屏幕自动调接数值从而很轻松的实现自适应布局展示在不同尺寸屏幕下。项目中常常碰到要始终居中的元素当然想到的第一个就是使用margin0 auto或者使用定位和margin结合的这种简单的方法当同事告诉我让我去研究研究calc的时候才真正的深入了解这个Css3中的新东西。 二、使用方法 calc()中的参数是一个计算公式通过这个计算公式把计算宽度和数值的任务扔给不同尺寸下的浏览器让页面能够自己得出宽度或数值的结论这些计算公式也都是很简单的加( )减( - )乘( * )除( / )运算。 div{
width: calc(15px 15px);//30px
width: calc(15px - 10px);//5px
width: calc(15px*2);//30px
width: calc(15px/3);//5px
} 从上面的例子中可以看出加( )减( - )运算中需要计算的数值与运算符之间是有空格的并且这空格是不能省略的而乘( * )除( / )运算里的空格是可以省略的。 calc()中的表达式是可以使用百分比、px、em、rem等单位进行计算的并且单位可以混在一起计算 div{
width: calc(3em 5px);//53px
} 三、calc()嵌套 calc()是一个函数那么函数是可以支持嵌套的可以通过不同的公式来算出最后的结果。 div{
--widthA: calc(10px 190px);
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);//50px
} 四、简单的居中 calc()可以计算宽度以后居中显示的实现就可以有很多方法padding或者margin但它的原理都是一样的。 div{
padding: 0 calc((100% - 1024px)/2);
} 假设中间的内容是固定宽度1024px那么获取父级的宽度或者窗口的宽度100%然后减去内容的宽度后剩下的就是需要分配给内容左右两边的宽度将它们一分为二/2就可以实现中间1024px宽度的内容一直居中了。 五、兼容性 calc()的兼容性已经很高了IE9 、FF4.0 、Chrome和Safari6 都已经支持calc()的应用但还是要加上不同浏览器的前缀。 div{
-moz-calc(expression);
-webkit-calc(expression);
calc(expression); //expression为计算公式
}
