定义与用法

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. 面试总结 | 百度 NLP 实习生

    1. 项目简历:主要体现和招聘要求相关的工作,简历要精简,不要给过多冗余信息.对于每个项目,自己做过的工作,里面用到的方法,要很清楚,工作的motivation.意义等也要清楚. 这次面试中我的问题: ...

  2. PHP7 下安装 memcache 和 memcached 扩展

    转载自:https://www.jianshu.com/p/c06051207f6e Memcached 是高性能的分布式内存缓存服务器,而PHP memcache 和 memcached 都是 Me ...

  3. 3道入门字典树例题，以及模板【HDU1251/HDU1305/HDU1671】

    HDU1251:http://acm.hdu.edu.cn/showproblem.php?pid=1251 题目大意:求得以该字符串为前缀的数目,注意输入格式就行了. #include<std ...

  4. 简单的GCC语法： 弄清gcc test.c 与 gcc -c test.c 的差别

    转载于:http://cache.baiducontent.com/c?m=9d78d513d99610fe4fede5690d60c067690597634dc0d06368d5e31587231b ...

  5. Apollo分布式部署总结

    环境 操作系统为centOS7 Apollo服务端为Java版本为1.8 MySQL5.8.x 环境DEV 注意事项 按文档安装config与admin的数据库,并修改相关配置 在修改Apollo P ...

  6. Count Different Palindromic Subsequences

    Given a string S, find the number of different non-empty palindromic subsequences in S, and return t ...

  7. hanlp添加自定义字典的步骤介绍

      本篇分享一个hanlp添加自定义字典的方法,供大家参考! 总共分为两步: 第一步:将自定义的字典放到custom目录下,然后删除CustomDicionary.txt.bin,因为分词的时候会读这 ...

  8. gitlab不能启动了

    gitlab意外停止后不能启动,执行gitlab-ctl start 提示全部启动失败. GitLab won’t start – runsv not running. Gitlab didn’t s ...

  9. ARST第三周打卡

    Algorithm : 做一个 leetcode 的算法题 //二位数组查找 题目描述 //在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺 ...

  10. OpenVZ平台 Google BBR加速

    前言  一直以来用的都是搬瓦工的VPS,不得不说比国内那些大厂的性价比高得不知道哪里去了.  当做梯子来用的话搬瓦工年付19.9美元的方案就够用了,网上还有一些官方优惠码(折扣6%: BWH1ZBPV ...