当前位置: 首页 > Web前端 > HTML

css3calc会计算的属性

时间:2023-04-02 14:19:08 HTML

calc是英文单词calculate(计算)的缩写,是css3的新功能。你可以使用calc()给元素如border、margin、pading、font-size和width属性设置动态值。calc()可以在数学运算中使用简单的加(+)、减(-)、乘(*)、除(/)来解决问题,也可以转换基于px、em、rem、百分比等单位的计算。注意在写calc表达式的时候,width:calc(50%-20px);-右边必须有一个空格,否则这行代码无效。这是calc浏览器支持情况。例子:当必须使用设置百分比的页面,同时有边距时,会出现下一行不够满的情况,所以需要用calc重新计算百分比

@mediascreenand(min-width:768px){.col-sm-1{宽度:calc(8.1%-20px);}.col-sm-2{宽度:计算(16.7%-20px);}.col-sm-3{宽度:计算(25%-20px);}.col-sm-4{宽度:计算(33.3%-20px);}.col-sm-6{宽度:计算(50%-20px);}.col-sm-12{宽度:计算(100%-20px);}}