定义与用法

calc() 函数用于动态计算长度值。

  • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
  • 任何长度值都可以使用calc()函数进行计算；
  • calc()函数支持 "+", "-", "*", "/" 运算；
  • calc()函数使用标准的数学运算优先级规则；

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

    body{position: relative;}

    *{padding: ;

    margin:;}

#div1 {

    width: calc(% - 100px);

    border: 1px solid black;

    background-color: yellow;

    text-align: center;

    margin: auto;

}

</style>

</head>

<body>

    <div id="div1">一些文本...</div>

</body>

</html>

calc() 函数的更多相关文章

  1. calc()函数的使用

    calc()函数算是css中的一个另类了,一般来说css都是直接确定的样式,而calc()函数却是可以动态计算,这和css静态的概念有些区别,但这并不妨碍其优秀的性能. 什么是calc()? calc ...

  2. css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏

    最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...

  3. css绘制特殊图形，meida查询，display inline-box间隙问题以及calc()函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

  4. CSS 中 calc() 函数用法

    CSS calc() 函数 calc() 函数用于动态计算长度值. 注意,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进 ...

  5. CSS3 calc()函数使用

    1.calc是什么? calc是英文单词calculate(计算)的缩写,用于动态计算长度值. calc()函数支持 "+", "-", "*&quo ...

  6. div里面的元素在【垂直 方向】上水平分布 使用calc()函数动态计算

    1==>如何让div里面的元素在[垂直 方向]上水平分布.important-dec{ height: 121px; //必须固定高度 flex-direction: column; //垂直排 ...

  7. CSS3 新特性（box-sizing盒模型，背景线性渐变，filter滤镜，calc函数，transition过渡）

    1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改 ...

  8. 详解calc()函数功能

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

  9. 为什么CSS中的calc函数可能会不生效？

    前言 在早期如果想要对某一些样式进行动态计算,绝大多数的做法都是使用JavaScript来进行,当时的CSS在面对这种场景显得有点无能为力.但是,当CSS3中新增了calc函数时,面对这种场景,Jav ...

随机推荐

  1. C# String与Byte数组的转换

    string转byte[]: byte[] byteArray = System.Text.Encoding.Default.GetBytes(str); byte[] byteArray = Enc ...

  2. history 命令

    history 命令用来显示执行过的命令,也可以根据显示的命令重新执行需要的命令. 用法: n 显示n个最近的记录 -a 添加记录到history文件中 -c 将目前shell中的所有history命 ...

  3. hdoj1520（入门树形dp）

    题目链接:https://vjudge.net/problem/HDU-1520 题意:和luogu那道没有上司的舞会一样的题,给定一棵带点权的树,父结点和子结点不能同时选,问怎么选使得权值和最大,求 ...

  4. [转帖]nginx 80端口重定向 转发到443端口

    nginx 80端口重定向到443端口 2017年05月16日 13:53:58 幸福丶如此 阅读数 33387   版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文 ...

  5. [转帖]yum与apt-get的区别以及两者更新源（阿里/网易【163】）

    yum与apt-get的区别以及两者更新源(阿里/网易[163]) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/one_super_dreamer ...

  6. CENTOS 6-7的本地YUM源配置

    本文档适合CENTOS 6-7的本地YUM源配置 cd /media cd CentOS_6.8_Final/ cd Packages 创建目录拷贝文件 mkdir /yum cp * /yum 配置 ...

  7. VIM 介绍

    gedit  a.txt  是一个图形界面的文本编辑器.  需要安装图形界面才会有. nano a.txt  也是一样的 vi  是一种文本界面的编辑器. vim  是 vimsual interfa ...

  8. LEN()和DATALENGTH()的区别

    原文:LEN()和DATALENGTH()的区别 版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.n ...

  9. 【LOJ】#3109. 「TJOI2019」甲苯先生的线段树

    LOJ#3109. 「TJOI2019」甲苯先生的线段树 发现如果枚举路径两边的长度的话,如果根节点的值是$x$,左边走了$l$,右边走了$r$ 肯定答案会是$(2^{l + 1} + 2^{r + ...

  10. 永久修改Putty设置

    在使用远程登录Putty时,会发现修改一些设置并且退出后发现自己之前改的设置不见了,可以通过保存设置解决 假设我要修改远程终端的背景颜色,选择系统颜色 勾选后,如果不保存下次登入时又要进行设置 点击D ...