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

最新推荐文章于 2024-06-25 17:44:25 发布

NINE-NINE

最新推荐文章于 2024-06-25 17:44:25 发布

阅读量5.6k

点赞数 2

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/m0_38099607/article/details/73012637

版权

CSS3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

width: calc(100% -8px);     // 这样会出错,结果为0
width: 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>