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

站长手记作者： 2024-08-28 14:35:01

在css3样式中有一个类似与函数的计算属性calc()，它主要用于指定元素的长度，无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。

calc的介绍

calc的用法

.elm{
        width:calc(expression);
}

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

calc的兼容:

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

在less如何使用

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

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

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

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);
    }
}

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_70172.html

相关资讯： css3 calc() calc的用法