CSS3新单位:calc()未来自适应布局利器!

前言

介绍前大家可以先考虑一个布局的问题:

页面中有两个元素:ele 1和ele 2,他们之间还有跟页面左右的间隔都是30px,宽度随着页面宽度而自适应。

效果图:

CSS3新单位:calc()未来自适应布局利器!

这个问题有很多种解决办法,大家可以想一想。下面我会给出关于这篇文章的解决办法。

什么是calc()

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,类似px,100%,也能表示元素的长宽等。是不是想起了IE的expression?

calc()能做什么

calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说:

width:calc(50% + 2em)

calc()语法

calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:

.elm {
    width: calc(expression);
}

其中"expression"是一个表达式,用来计算长度的表达式。

calc()的运算规则

  • 使用“+”、“-”、“*” 和 “/”四则运算;

  • 可以使用百分比、px、em、rem等单位;

  • 可以混合使用各种单位进行计算;

  • 表达式中有“+”和“-”时,其前后必须要有空格,如"widht:

  • calc(12%+5em)"这种没有空格的写法是错误的;

  • 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

文中问题的答案

说到这里大家应该会想到解决办法,这里给出代码:

Html:

<div class="container">
    <div class="ele1"> ele 1 </div>
    <div class="ele2"> ele 2 </div>
</div>

CSS:

.container{
    width: 500px;
    height: 300px;
    background: #ffffff;
    margin: 50px auto;
}
.ele1{
    float: left;
    margin: 30px 15px 0 30px;
    width: -webkit-calc((100% - 90px)/2);
    background: red;
}
.ele2{
    float: left;
    margin: 30px 30px 0 15px;
    width: -webkit-calc((100% - 90px)/2);
    background: green;
}

其他解决办法:

  • flexbox(简直就是神器)

  • table貌似也可以

  • 其他方法

兼容性

目前来看还是很不错的。caniuse传送门

CSS3新单位:calc()未来自适应布局利器!


作者:weifengsn 

原文链接:HelloWeb前端网 » CSS3新单位:calc()未来自适应布局利器! » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享