文档章节

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

明非_
 明非_
发布于 2015/12/10 13:48
字数 548
阅读 67
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

sklearn中predict_proba用法(注意和predict的区别)

参考网址:https://blog.csdn.net/m0_37870649/article/details/79549142 # 返回预测标签 print(clf.predict(x_test)) # 返回预测属于某标签的概率 print(clf.predict_proba(x_test))...

小叮当_加V
8分钟前
0
0
docker swarm创建consul集群

version: '3.6'x-consul: &consul image: consul:latest volumes: - consul:/consulvolumes: consul:services: client: <<: *consul ports: - "8500:......

weidedong
9分钟前
0
0
Git客户端(TortoiseGit)基本使用详解

1、 环境安装 Git最新版下载地址:https://gitforwindows.org/ TortoiseGit,Git客户端,32/64位最新版及对应的语言包下载地址:https://tortoisegit.org/download/ 安装的方法,一直下一步就...

hblt-j
15分钟前
0
0
服务发现比较:Consul vs Zookeeper vs Etcd vs Eureka

这里就平时经常用到的服务发现的产品进行下特性的对比,首先看下结论: Feature Consul zookeeper etcd euerka 服务健康检查 服务状态,内存,硬盘等 (弱)长连接,keepalive 连接心跳 可配支持...

lemonLove
16分钟前
0
0
1、ElasticSearch的安装配置和使用

一、安装 按照个人习惯我习惯把自己的软件都安装到opt下 解压 tar -zxvf elasticsearch-6.3.2.tar.gz 重命名 mv elasticsearch-6.3.2.tar.gz esearch 移动 mv elasticsearch-6.3.2.tar.gz /o...

丑陋的皮囊
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部