html计算宽度，巧⽤CSS3的calc（）宽度计算做响应模式布局今天浏览⼤前端发现了 巧⽤CSS3的calc()宽度计算做响应模式布局 这篇⽂章，在本地也做了简单的demo演⽰，对我启迪还挺⼤，所以果断码之… 原⽂如下：
于是就研究了⼀下，calc()从字⾯我们可以把他理解为⼀个函数function。其实calc是英⽂单词calculate(计算)的缩写，是css3的⼀个新增的功能，⽤来指定元素的长度。⽐如说，你可以使⽤calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使⽤的表达式来得到的值。不过calc()最⼤的好处就是⽤在流体布局上，可以通过calc()计算得到元素的宽度。
calc()能做什么？
calc()能让你给元素的做计算，你可以给⼀个div元素，使⽤百分⽐、em、px和rem单位值计算出其宽度或者⾼度，⽐如
说“width:calc(50% + 2em)”，这样⼀来你就不⽤考虑元素DIV的宽度值到底是多少，⽽把这个烦⼈的任务交由浏览器去计算。
calc()语法
calc()语法⾮常简单，就像我们⼩时候学加 (+)、减(-)、乘(*)、除(/)⼀样，使⽤数学表达式来表⽰：
width:calc(expression);
其中”expression”是⼀个表达式，⽤来计算长度的表达式。
calc()的运算规则
calc()使⽤通⽤的数学运算规则，但是也提供更智能的功能：
使⽤“+”、“-”、“*” 和 “/”四则运算；
可以使⽤百分⽐、px、em、rem等单位；
可以混合使⽤各种单位进⾏计算；
表达式中有“+”和“-”时，其前后必须要有空格，如”widht: calc(12%+5em)”这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
浏览器的兼容性
我们来个例⼦，我们做⼀个三列并排的模块，宽度按百分⽐、有padding值、有border值、还有margin-right，⽽且这三个值是px
li{
float:left;width:33.3333%;height:50px;padding:10px;margin-right:10px;background:#FF6666;border:5pxsolid#DAC8A7;
}
效果图：
margin属性值可以为百分比
它是不会好好并列的，在这种情况下就不好算了，就算算出来也有那么⼀点误差，不是吗？现在我们就⽤到了calc(),
li{
float:left;
/*width:33.3333%;*/height:50px;padding:10px;margin-
right:15px;background:#FF6666;border:5pxsolid#DAC8A7;width:calc(33.3333% - (10px + 5px) * 2 - 15px ) }
意思是(width-(padding+border)*2-margin) 现在可以并排了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。