文档章节

CSS3的calc()使用,css里不同单位相加你信不信?

明非_
 明非_
发布于 2015/12/10 13:48
字数 548
阅读 90
收藏 0

什么是 calc()

简单通俗的将,就是能把不同单位的属性执行四则运算,产出结果。

举一个简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .out {
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
        }
        .in {
            background: red;
            /*width: calc(100% - 25px);*/
            width: 100%;
            margin-left: 25px;
        }

    </style>
</head>
<body>
    <div class="out">
        <div class="in">
            **calc()**从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。 text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla.....
        </div>
    </div>
</body>
</html>

展示效果如下图

calc()用法图

因为我们内部div的宽度为100%,然后又设置了margin-left,所以内部超出了外面的div,有时候我们不想要这种效果,我们继续测试下面的代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .out {
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
        }
        .in {
            background: red;
            width: calc(100% - 25px);
            margin-left: 25px;
        }

    </style>
</head>
<body>
    <div class="out">
        <div class="in">
            calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。 text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla..... text....blablabla.....
        </div>
    </div>
</body>
</html>

如下图 calc()用法图

这样我们就达成了预期效果。

最后来看看兼容性

calc()兼容性图

2015-12-10 edire 发表于极客学院 http://qun.jikexueyuan.com/web/topic/224

© 著作权归作者所有

共有 人打赏支持
明非_

明非_

粉丝 7
博文 18
码字总数 10823
作品 2
临沂
程序员
私信 提问
细谈CSS3之calc

在很早以前,就知道CSS3有一个计算函数,但一直没有深入了解。今天在别人的博客上偶然看到了关于的详细介绍,于是燃起了深入了解此特性的想法。 原文地址: 细谈CSS3之calc 什么是Calc 是英文...

xiaoxiao昱
2017/12/12
0
0
视口相关单位的应用 —— 别说你懂CSS相对单位

前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《Working with relative units》,书中对relative units的讲解和举例可以说相当全面,看完之后发现自己并不太懂CSS相对...

YuyingWu
07/23
0
0
CSS3calc()属性的使用详情

calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。 以前我们可以使用box-sizing:border...

代码小子的博客
2017/12/18
0
0
CSS3 calc() 会计算的属性

可用的属性: calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。 以前我们可以...

不负好时光
02/04
1
0
css 中的calc()函数

calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性...

拉普拉斯婷
2016/10/20
8
0

没有更多内容

加载失败,请刷新页面

加载更多

中国龙-扬科
31分钟前
2
0
使用vuex的state状态对象的5种方式

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。 下面给大家来贴一下我的vuex的结构 下面是store文件夹下的state.js和index.js内容 //state.jsconst state =...

peakedness丶
35分钟前
2
0
NetCore MVC Demo

地址:http://114.116.9.72:5411

whltian
42分钟前
3
0
Netty handle方法周期 (四)

写了一个练习之后,发现自定义的助手类每次肯定是必须的,对于不同的业务逻辑需求,会写相对应的逻辑 最简单的查看Handle生命周期的方式,就是重写上级方法,看名字差不多应该可以知道方法的作用 ...

_大侠__
47分钟前
9
0
vue主动刷新页面及列表数据删除后的刷新实例

1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者...

前端小攻略
58分钟前
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部