定义与用法

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. 现代化的拷贝文字---clipboard.js

    参考链接:http://www.clipboardjs.cn/

  2. centos 7 cloudera-manager5.16.2,CDH5.16.2安装升级spark2.4.0

    1.在已经安装好系统的linux服务器上关闭selinux和iptables 2.在所有linux服务器上配置ntp服务并设置ntp时间同步 3.在所有linux服务器上安装好cm和cdh版本所需要对 ...

  3. *** 没有规则可以创建目标“test”。 停止。

    在编译Linux模块时出现这个问题,在仔细检查了Makefile没有错误后,重名了了该源程序和Makefile所在文件夹的名字,与源程序名字一致,然后问题就消失了!它们的关联体现在哪啊!?

  4. STL stack 常见用法详解

    <算法笔记>学习笔记 stack 常见用法详解 stack翻译为栈,是STL中实现的一个后进先出的容器.' 1.stack的定义 //要使用stack,应先添加头文件#include &l ...

  5. Laravel-admin 消息提醒、播放音频、点击跳转

    jquery-toastr 消息提醒.播放音频.点击跳转 应用情景,有新的订单生成,后台进行消息提醒并播放音频(这里用到轮询简单实现):下面附代码 1.找到laravel-admin 中的 index ...

  6. thinkPHP连接数据库报错：PDOException in Connection.php line 295

    跑去网上找了N多方法来尝试,重装apache.mysql.安装集成软件都试过了.错误一样. 后来细细分析,PDOException in Connection指的不就是PDO异常吗? 然后去了解了一些 ...

  7. linux kprobe rootkit学习

    介绍 <linux二进制分析>中提到了使用kprobe来写内核rootkit,还给出了一个简单的源码实现,这里看一下他的源码 kprobe kprobe的介绍可以看下面这几篇文章 介绍:h ...

  8. Tomcat中的Host和Engine级别的servlet容器

    这边文章主要介绍的是Host容器 和 Engine容器.如果你想在同一个Tomcat上部署运行多个Context容器的话,你就需要使用Host容器,从理论上来讲,如果你的Tomcat只想要部署一个Co ...

  9. Struts2 流程原理

    一.流程图 (转) 二.流程详解 1.服务器传递来的请求,通过ActionContextClearUp.other filters.最后到达StrutsPrepareAndExecuteFilter ...

  10. vue 换肤

    /* eslint-disable */ // 设置文件 import setting from "@/setting.js"; const themeList = setting ...