定义与用法

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. kubernetes的namespaces总是Terminating

    0.尝试强制删除不行 删除时带上–force --grace-period=0参数 ,无法删除:kubectl delete namespace rook-ceph --force --grace-p ...

  2. 第七周课程总结&实验报告（五）

    实验四 类的继承 实验目的 理解抽象类与接口的使用: 了解包的作用,掌握包的设计方法. 实验要求 掌握使用抽象类的方法. 掌握使用系统接口的技术和创建自定义接口的方法. 了解 Java 系统包的结构. ...

  3. windows下安装和配置SNMP

    window snmp服务开启及测试 转自:https://blog.csdn.net/qq_33314107/article/details/80031446 一 安装 二 开启服务 Linux下安 ...

  4. Spring5的总体架构图

    Spring5的主体架构图 主要是四大部分:Web.Data Access/Integration.Core Container.中间层,具体见下图:

  5. better-scroll踩坑合集

    better-scroll踩坑合集:https://www.jianshu.com/p/6338a8033281

  6. ssm中静态文件加载路径

    项目在本地软件和在服务器上的项目路径如果写死,有可能会出现项目在本机上可以访问,架设在服务器上后就不能访问 这儿介绍在ssm框架中使用 @WebServlet(urlPatterns = {},loa ...

  7. Keepalive+双主

    一．建立3台服务器之间ssh互信在mydb1,mydb2,mydb3服务器上分别执行:ssh-keygen -t rsassh-copy-id -i .ssh/id_rsa.pub root@192. ...

  8. 数值优化（Numerical Optimization）学习系列-目录

    数值优化(Numerical Optimization)学习系列-目录 置顶 2015年12月27日 19:07:11 下一步 阅读数 12291更多 分类专栏: 数值优化   版权声明:本文为博主原 ...

  9. intelliJ idea安装go开发环境 并 搭建go项目 打包

    本人使用的是 idea 开发go项目  也是一个初学者  将自己遇到的问题记录分享 在晚上查找了很多资料  没有什么可以直接使用  本人再次整理一下 我使用的idea 时 2017.2.6 版本的 查 ...

  10. HTML——form表单中常用标签 form input (text hidden password radio checkbox reset submit ) select(option)总结

    <form action="" method="get"> <!-- placeholder="请输入文本" 显示提示 r ...