定义与用法

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语言-深入理解void

    void的字面意思是"无类型",void *则为"无类型指针",void *可以指向任何类型的数据 void含义 void几乎只有注释和限制程序的作用,定义一个 ...

  2. Java-Redis 热部署问题

    项目请求时报错: java.lang.ClassCastException: cn.xingaohbd.seckil.model.User cannot be cast to cn.xingaohbd ...

  3. [bzoj4026]dC Loves Number Theory_主席树_质因数分解_欧拉函数

    dC Loves Number Theory 题目大意:dC 在秒了BZOJ 上所有的数论题后,感觉萌萌哒,想出了这么一道水题,来拯救日益枯竭的水题资源. 给定一个长度为 n的正整数序列A,有q次询问 ...

  4. Linux 网络 I/O 模型简介（图文）(转载)

    Linux 网络 I/O 模型简介(图文)(转载) 转载:http://blog.csdn.net/anxpp/article/details/51503329 1.介绍 Linux 的内核将所有外部 ...

  5. Mac下安装SecureCRT客户端并激活

    1. 先下载SecureCRT和破解文件 默认下载到了当前用户的”下载”目录中 2. 在”Finder”中 打开 “scrt-7.3.0-657.osx_x64.dmg” 并将 SecureCRT复制 ...

  6. SQL SERVICES 搭建问题

    一.SQL SERVICES  设置IP 连接 SQL2008是没有外围配置的,为了能用IP地址或者local登陆,需要做下面的配置. 打开Microsoft SQL Server 2008 R2→配 ...

  7. oracle导出空表

    1.先查询数据库空表 select 'alter table '||table_name||' allocate extent;' from user_tables where num_rows=0 ...

  8. SQLite进阶-11.Join

    目录 JOIN 交叉连接 - CROSS JOIN 内连接 - INNER JOIN 外连接 - OUTER JOIN JOIN JOIN 子句用于结合两个或者多个数据表的数据,基于这些表之间的共同字 ...

  9. 使用Spring-boot-admin对Spring boot的服务进行监控

    要进行监控,需要两个Project,一个是Admin Server端,负责监控Spring boot的项目,另一个是Admin Client端,是被监控的Spring boot服务. Admin Se ...

  10. vue中关于checkbox数据绑定v-model指令说明

    vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'> <input type="c ...