CSS3 calc()函数使用

软件设计 2017-08-22

1、calc是什么？

calc是英文单词calculate(计算)的缩写，用于动态计算长度值。

  • calc()函数支持 "+", "-", "*", "/" 运算；
  • + 和 - 运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式：一个百分比后跟一个负数长度值。而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。* 和 / 运算符不需要空白符，但考虑到统一性，仍然推荐加上空白符。
  • 可以使用百分比、px、em、rem等单位；

2、浏览器兼容性

http://caniuse.com/#search=calc

CSS3 calc()函数使用

3、calc使用

calc()主要应用在流体布局上，可以通过calc()计算得到元素的宽度。

calc()根据给定百分比、em、px和rem单位值计算出其宽度或者高度，比如说”width:calc(50% + 2em)，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。

4、示例代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>CSS3 calc()函数应用</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            .test {
                width: calc(100% - 50px);
                border: 1px solid red;
            }
        </style>
    </head>

    <body>
        <div class="test">我的宽度为100% - 50px</div>
    </body>

</html>

效果：

CSS3 calc()函数使用

软件设计

软件设计

相关推荐

Go单元测试命令

Go 语言推荐测试文件和源代码文件放在一块，测试文件以_test.go结尾。比如，当前 package 有calc.go一个文件，我们想测试calc.go中的Add和Mul函数，那么应该新建calc_test.go作为测试文件。测试用例名称一般命名为Tes

83417807 / 0评论 2020-06-28

TypeScript（20）： 声明文件

TypeScript 作为 JavaScript 的超集，在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题，需要将这些库里

88570299 / 0评论 2020-06-26

css3--新属性

vh/vwvh: 相对于视窗的高度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;calccalc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用ca

zhanghaibing00 / 0评论 2020-04-30

html,css,js实现的一个钟表

<!DOCTYPE html>. display: flex;flex-direction: column;justify-content: center;align-items: center;width: 100vw;height: 100

爱好HtmlCssJs / 0评论 2019-10-29

CSS3 新特性（box-sizing盒模型，filter滤镜，calc函数，transition过渡）

CSS3 中可以通过 box-sizing 来指定盒模型，有两个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。　如果盒子模型我们改为了 box-sizing：border-box，那么 padding

wangjie / 0评论 2019-10-25

在Less中使用calc完成不同单位的宽度计算

计算从LESS CSS中的百分比到像素减去像素的宽度

sixyearsorless / 0评论 2018-01-23

SAET SQL_CALC_FOUND_ROWS 问题

上午遇到 应用数据查不到的问题,但是 数据库中明明是有记录的.... 排查代码没有发现 但是在 SAET RDC日志中发现

Hashxu / 0评论 2013-07-20

CSS遇到的坑

前言自学了那么久，慢慢开始写页面遇到了不少关于css的坑，想写一篇文章来记录一下，也方便以后自己在遇到这些坑时回顾一下，遇坑即更。calc使用Chrome浏览器时候，用到了css3中的calc函数，写法如： height: calc;但是在页面中却不

buttonChan / 0评论 2019-07-01

胡子哥的重学前端（笔记）css语法

at 规则@charset在外部样式表文件内使用。指定该样式表使用的字符编码。该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。...@import指定导入的外部样式表及目标媒体。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需

ajhongshaorou / 0评论 2019-06-30

css3实现信纸/同学录效果

实现思路：网格背景，由css3的线性渐变来实现。纸上的打孔，由圆和圆柱组成，多个打孔，可以由box-shadow的平铺来实现。

wangnantjobj / 0评论 2019-06-29

在Less中使用calc完成不同单位的宽度计算

} 然而在Less中，这样写是不可行或者说达不到预期的效果的，需要转义calc的参数，具体语法如下：。计算从LESS CSS中的百分比到像素减去像素的宽度

Alisa0 / 0评论 2018-01-23

CSS3的calc()使用

calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？这一点也让我百思不得其解，今天有一同事告诉我，说CSS3中有一个属性能实现自适应的布局，首先让我想到的是box-sizing

kaiya0 / 0评论 2016-11-03

前端每日实战：17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。源代码下载请从 github 下载。

lanzhusiyu / 0评论 2019-06-27

CSS基础篇--CSS3 calc实现滚动条出现页面不跳动

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-

wcssdu / 0评论 2019-06-25

css 百分比减去像素

#box { height:200px; width:@height; background:#080; opacity:@height; }2)第二种实现方式。/** 2）宽度，10em加20px。/** 3）3栏等宽布局。

yyNet0 / 0评论 2013-04-23

前端学习总结【102天】：CSS——响应式网格（栅格化）布局的HTML、CSS实现

2.浮动布局:子元素float:left;

wcssdu / 0评论 2019-06-21

纯 HTML+CSS+JavaScript 编写的计算器应用

有且只有一个文件：index.html。不允许再有其他文件，不允许再有单独的CSS、JS、PNG、JPG文件。运行环境为 Google Chrome。必须支持标准的四则运算。请在收到邮件的48小时内独立完成本测试，并回复本邮件。一道笔试题引发的一个练手项目

bailangriver / 0评论 2019-06-20

Go语言中读取命令参数的几种方法总结

对于一名初学者来说，想要尽快熟悉 Go 语言特性，所以以操作式的学习方法为主，比如编写一个简单的数学计算器，读取命令行参数，进行数学运算。本文讲述使用三种方式讲述 Go 语言如何接受命令行参数，并完成一个简单的数学计算，为演示方便，最后的命令行结果大概是这

yibadouzi / 0评论 2017-11-30

css calc

CSS3的calc()使用作者：大漠日期：2012-08-06点击：2733calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。这一点也让我百思不得其解，今天有一同事告诉我，说CSS3中有一个属性能实现自适应的布局，首先让我想到的是

Ydgent / 0评论 2013-09-09

Android TraceView

Traceview是android平台配备一个很好的性能分析的工具。它可以通过图形化的方式让我们了解我们要跟踪的程序的性能，并且能具体到method。首先，必须在程序当中加入代码，以便生成trace文件，有了这个trace文件才可以将其转化为图形。在运行程

qinxu / 0评论 2010-11-16

JavaScript中方法的覆盖问题

对于很多刚从Java学习过渡到JavaScript学习的同学来说在定义方法的问题上最头疼，我们Java人员来学习JavaScript是非常容易上手的，因为语法大部分都相同。但是定义方法是个例外，JavaScript中没有方法重载的概念，匹配方法只去比较方法

咸鱼的星空 / 0评论 2019-03-01

Python 的* 和** 关于参数解包和参数传递

在Python函数中，还可以定义可变参数。顾名思义，可变参数就是传入的参数个数是可变的，可以是1个、2个到任意个，还可以是0个。我们以数学题为例子，给定一组数字a，b，c……，请计算a2 + b2 + c2 + ……。要定义出这个函数，我们必须确定输入的参

逍遥友 / 0评论 2018-04-14

Python利用正则表达式实现计算器算法思路解析

最后再完成一次四则运算即可完成所有运算。calc_list = re.split #通过+-符号将各个乘除运算分隔出来。# 注意匹配的必要项与非必要项，如："[0-9]+[.][0-9]+[*|/][-][0-9]+[.][0-9]+"

LodbkMi / 0评论 2018-04-25

IronPython和C#交互

IronPython是一个.NET平台上的Python实现，包括了完整的编译器、执行引擎与运行时支持，能够与.NET已有的库无缝整合到一起。IronPython已经很好的集成到了.NET framework中，所以Ironpython和C#的交互也就变得很

qianqianNingmeng / 0评论 2015-07-12

ECMAScript6函数默认参数

语言更新时每一个新增的特性都是从千百万开发者需求里提取过来的，规范采用后能减少程序员的痛苦，带来便捷。}简单说就是x，y提供了一个默认值为0，不传时x, y以值0来运算。}自己用原生JS封装的一个简易ajax函数，url必填，async和dataType可

urbunt / 0评论 2019-04-27

经典剖析SVN分支与合并

本节主要向大家描述一下SVN分支与合并，分支和SVNmerge有很多不同的用法，这个小节描述了最常见的用法，希望通过本节的学习，大家对SVN分支与合并有深刻的理解。下面是SVN分支与合并。因为svnmerge的操作很像svndiff，比较最新的主干和分支树

FDmitnick / 0评论 2010-06-01

SVN分支资深专家专题讲解

本节向大家简单介绍一下什么是SVN分支，如何使用SVN分支，如何创建SVN分支，如何进行廉价的拷贝，对于这些问题本节会给你一一解答，欢迎大家一起来学习关于SVN分支的知识。假设你需要在你的电脑上维护一份被分离的文档,一个手册或是别的什么.某天要求你对同份文

dingqinghu / 0评论 2010-05-28

在Linux下GCC将文件合起来编译

大家用gcc懂得怎样将几个文件合来编译吗，如果不懂可以看一看，懂的请指点，这个是老师上课的练习，目的是让我们熟悉怎样在linux的gcc下将文件合起来编译，gcc calc.c printout.c sq.c -o calc那就可以了

柯利南 / 0评论 2007-11-05

SVN分支维护专家在线

本节讲解一下如何进行SVN分支维护，前面几节我们讲了SVN的分支与合并，相信大家应该掌握了，下面就SVN分支维护问题和大家讨论一下，希望对你有所启发。你一定注意到了Subversion极度的灵活性，因为它用相同的底层机制实现了分支和标签，因为分支和标签是作

yangzhao000 / 0评论 2010-05-20

python学习笔记(八):异常处理

在程序运行过程中，总会遇到各种各样的错误。程序一出错就停止运行了，那我们不能让程序停止运行吧，这时候就需要捕捉异常了，通过捕捉到的异常，我们再去做对应的处理。下面我们先写一个函数，实现除法运算。print#再次调用，这时候就不对了，因为被除数不能为0,下面

面向工资编程 / 0评论 2018-01-06

常见的布局类问题及面经

定期更新面经P5 P6面经、欢迎star左边定宽、右边自适应方案一 左边设置左浮动，右边宽度设置100% () .left {. }方案二 左设置左浮动、右边也左浮动 但是使用calc去补宽度长度计算 .left {. 1vw = viewport 宽

从零学习前端开发 / 0评论 2017-12-12

关于使用rem单位，calc()进行自适应布局

关于css中的单位大家都知道在css中的单位，一般都包括有px,%,em等单位，另外css3新增加一个单位rem。css3针对这种情况在css3的规范下推出了一个新的单位rem，rem的使用方式和em类似，只不过em是基于其父元素的字体大小来进行计算，而r

软件设计 / 0评论 2017-07-18

day4 计算器

实现加减乘除及拓号优先级解析；用户输入 1 - 2 * 等类似公式后，必须自己解析里面的(),+,-,*,/符号和公式，运算后得出结果，结果必须与真实的计算器所得出的结果一致。3 formula = '1 - 2 * '. 9 formula_de

软件设计 / 0评论 2017-06-10

结对编程2-单元测试

针对提取出来的计算类的接口函数做单元测试。a. 加减乘除功能测试。该部分功能代码较长不贴出，将在coding中。public void panduanzifu //判断输入字符，

软件设计 / 0评论 2017-03-28

Linux办公一条龙之组件间的调用

作为一个大型办公套件, OpenOffice各个功能模块之间数据的嵌入、调用是必不可少的，也是该办公套件强大功能的一种表现。又有几种方法呢?在Linux办公一条龙系列的最后这期，笔者详细介绍一下常用的方法并辅以实例来说明。例如在Impress中插入Calc

Unix Linux / 0评论 2016-11-17