关闭

css3中样式计算属性calc()的使用和总结

时间: 2017-12-19阅读: 17843标签: css3

calc的介绍

css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。calc支持的运算单位有rem , em , %, px,calc是支持单位的混合使用的,其计算优先级别和数学一致。


calc的用法  

.elm{
        width:calc(expression);
}

其中,expression是一个用来计算长度的表达式,支持“+”,“-”,“*”,“/”运算符。


注意1: 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;而对于“*”,“/”并没有这种要求,但为了风格的统一,建议前后也要留空格。例如:

width: calc(100% -8px); /* 这样会出错,结果为0 */
width: calc(100% - 8px); /* 当 + -  符号用空格隔开时,运算成功 */


注意2:使用 * / 运算符时,必须保证有一个值为数值类型;


calc的兼容:

在IE9+、FF4.0+、Chrome19+、Safari6+支持较好,移动端支持不理想。 如图: 


兼容性前缀: 

.elm{
  width: calc(80% - 10px);
  width: -moz-calc(80% - 10px);   /*Firefox*/
  width: -webkit-calc(80% - 10px);   /*chrome safari*/
}


在less如何使用

由于less中会把它当表达式计算掉了,需要在参数外面加上: ~("expression"),如: 

.elm{
  width: calc(~"100% - 80px");
}

或者使用e(“”)包裹在里面,如:

width:e("calc(100% - 80px)");

可如果要用变量怎么用呢?也不复杂,像下面这样就搞定啦。 

.class {
  @cap: 50px;
  height: calc(~"100% - @{cap}");
}


calc实现适应布局例子

必须使用设置百分比页面同时又有margin时,会出现不够满挤到下一行的情况,所以要用到calc重新计算百分比

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-xs-6"></div>
        <div class="col-sm-4 col-xs-6"></div>
        <div class="col-sm-4 col-xs-12"></div>
    </div>
    <div class="row">
        <div class="col-sm-3 col-xs-3"></div>
        <div class="col-sm-6 col-xs-6"></div>
        <div class="col-sm-3 col-xs-3"></div>
    </div>
    <div class="row">
        <div class="col-sm-1 col-xs-2"></div>
        <div class="col-sm-1 col-xs-2"></div>
        <div class="col-sm-2 col-xs-8"></div>
        <div class="col-sm-2 col-xs-3"></div>
        <div class="col-sm-6 col-xs-3"></div>
    </div>    
</div>
@media screen and (min-width:768px){
    .col-sm-1{
        width: calc(8.1% - 20px);
    }
    .col-sm-2{
        width: calc(16.7% - 20px);
    }
    .col-sm-3{
        width: calc(25% - 20px);
    }
    .col-sm-4{
        width: calc(33.3% - 20px);
    }
    .col-sm-6{
        width: calc(50%- 20px);
    }
    .col-sm-12{
        width: calc(100% - 20px);
    }
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/256

CSS3新特性有哪些?

E:nth-child(n) 选择器匹配其父元素的第n个子元素,不论元素类型,n可以使数字,关键字,或公式;E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素

css3增加的的属性值position:stricky

position:sticky,这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。position:sticky 的生效是有一定的限制的

CSS3使用fit-content水平居中

当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有?那么今天给大家介绍一个fit-content属性,不知道有没有同学用过,如果用过那么你可以略过这篇文章,没用过的同学就继续了,我也是第一次看到这个属性,之前不知道这个属性更不用说使用了

css3新特性总结

css3新特性总结:圆角边框、多背景图、颜色和透明度(由原来的rgb到现在的rgba)、多列布局和弹性盒模型、盒子的变幻(2D、3D)、过渡和动画、引入web字体(在服务器端存储)、媒体查询、阴影

利用css3径向渐变做一张优惠券

在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过。那么你怎么做呢,切图做背景平铺边缘

CSS3 动画性能优化

CSS3 动画给 Web 的用户体验带来了巨大提升,本文将尝试从浏览器渲染的角度,来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。

css3动画transition的使用和介绍

CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体现出一种动画过程。

使用CSS3 Cubic-Bezier创建动画链接悬停效果

我们将使用CSS3动画过渡来创建简单但引人入胜的链接悬停效果,将鼠标悬停在链接上时,会弹出一个小弹出框。我们还将看一下CSS3 Cubic-Bezier(贝塞尔)曲线,它是CSS过渡

css3渐进增强 VS 优雅降级

进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。

CSS3中一些鲜为人知的属性

CSS3是CSS(层叠样式表)技术的升级版本,CSS3规范里的元素能以不同速度向前发展,因为不同的浏览器厂商只支持给定特性。这篇文章主要整理一些关于css3中的鲜为人知的属性

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!