文档章节

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

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

© 著作权归作者所有

明非_

明非_

粉丝 8
博文 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
2018/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等属性设置动态值。 以前我们可以...

不负好时光
2018/02/04
35
0
rem结合css3原生函数, 完成移动端各类屏幕适配

相信很多人接触的第一个网页尺寸单位是px, 表示一个像素点的大小 我们收到的设计师的设计稿也是以px为标准 但手机的屏幕是大小不一的, 在iPhone8上展示的很好的效果, 在iPhone5s上可能就完全...

木子昭
01/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
1
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
10
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
13
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
6
0
Django的ChoiceField和MultipleChoiceField错误提示,选择一个有效的选项

在表单验证时提示错误:选择一个有效的选项 例如有这样一个表单: class ProductForm(Form): category = fields.MultipleChoiceField( widget=widgets.SelectMultiple(), ...

编程老陆
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部