文档章节

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

明非_
 明非_
发布于 2015/12/10 13:48
字数 548
阅读 79
收藏 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
作品 1
临沂
程序员
细谈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

没有更多内容

加载失败,请刷新页面

加载更多

Java的快速失败和安全失败

一:快速失败(fail—fast) 在用迭代器遍历一个集合对象时,如果遍历过程中对集合对象的内容进行了修改(增加、删除、修改),则会抛出Concurrent Modification Exception。 原理:迭代器在...

狼王黄师傅
1分钟前
0
0
Echarts X轴Y轴配置参数详情

mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:"sans......

wqzbxh
3分钟前
0
0
解决kettle使用JDBC读取Oracle速度慢的问题

jdbc连接添加如下信息: defaultRowPrefetch=20000

了凡川
7分钟前
0
0
Linux学习-1015

8.10 shell特殊符号cut命令 8.11 sort_wc_uniq命令 8.12 tee_tr_split命令 8.13 shell特殊符号下 相关测验题目:题目:http://ask.apelearn.com/question/5437 扩展 扩展 1. source exec 区别...

wxy丶
7分钟前
0
0
Spring Boot核心注解讲解

Spring Boot核心注解讲解 Spring Boot最大的特点是无需XML配置文件,能自动扫描包路径装载并注入对象,并能做到根据classpath下的jar包自动配置。 所以Spring Boot最核心的3个注解就是: 1,...

DemonsI
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部