CSS3中的calc( )属性--可以计算的属性

来源：互联网发布：win10系统适合编程吗编辑：程序博客网时间：2024/05/18 11:24

语法：
calc() = calc(四则运算)
说明：
（1）calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
（2）任何长度值都可以使用calc()函数进行计算；
（3）calc()函数支持 “+”, “-“, “*”, “/” 运算；
（4）calc()函数使用标准的数学运算优先级规则；
（5）但需要注意的是 + - 必须用空格隔开;

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

兼容性：
这里写图片描述
使用
calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算。
比如三局平均分布的布局，中间间距为5像素。

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>btn</title>    <style>        *{ margin: 0; padding: 0; }        .box{             width: calc(100%/3 - 5px);             float: left;             margin-right: calc(5px*3 /2);            background: #aaa;            color: #333;            height: 100px;            text-align: center;            line-height: 100px;        }        .box:nth-child(3){            margin-right: 0;        }    </style></head><body>    <div class="box">1</div>    <div class="box">2</div>    <div class="box">3</div></body></html>

calc()还是比较用的,比如说想居中一个绝对定位的元素,一般都是left:50%;top:50%;然后再margin-left/margin-top值为-50%;现在.运用calc()也可以实现居中。

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>btn</title>    <style>        .box{            width: 100px; height: 100px;            background: #aaa;            position: absolute;            left: calc( 50% - 50px );            top: calc( 50% - 50px );        }    </style></head><body>    <div class="box"></div></body></html>

效果如下：
这里写图片描述

阅读全文

0 0