文章转载自 w3cplus http://www.w3cplus.com/

原文链接：http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

原文摘要：calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

【转载】CSS3的calc()使用的更多相关文章

  1. [转]CSS3 使用 calc() 计算高度 vh px

    1.px 像素,我们在网页布局中一般都是用px. 2.百分比 百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了. 3.Viewport    viewport:可视窗口,也 ...

  2. 转载 CSS3 经典教程系列：CSS3 盒阴影（box-shadow）详解

    目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果

  3. CSS3的calc()使用

    CSS3的calc()使用 calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pad ...

  4. CSS的单位及css3的calc()及line-height百分比

    锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...

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

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

  6. CSS3 使用 calc() 计算高度 vh px

    Viewport    viewport:可视窗口,也就是浏览器.    vw Viewport宽度, 1vw 等于viewport宽度的1%    vh Viewport高度, 1vh 等于view ...

  7. CSS的单位 及 css3的calc() 及 line-height 百分比

    CSS的单位及css3的calc()及line-height百分比 摘自:http://www.haorooms.com/post/css_unit_calc 单位介绍 说到css的单位,大家应该首先 ...

  8. css3的calc() css3的百分比减宽,减高,加,乘,除，适合用于后台的排版定位

    css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+.FF4.0+.Chrome19+.Safari6+ calc()语法非常简单,就像我们小时候 ...

  9. css3的calc属性不生效问题

    css3的 calc:计算属性.由于自己做的项目中这个属性不常用到,偶尔用一次还没效果. 后来研究了下是因为运算符两边没加空格. 错误示例:.content{width:calc(100%-50px) ...

  10. CSS3表达式calc( )

    CSS3表达式calc( ) 第一次看到calc( )时,不太相信calc()是css中的部分.因为看其外表像个函数,但是CSS里为啥会有表达式我也不太清楚,偶然机会在网页里看到的,自己切片写自适应时 ...

随机推荐

  1. 线程高级篇-Lock锁和Condition条件

    浅谈Synchronized: synchronized是Java的一个关键字,也就是Java语言内置的特性,如果一个代码块被synchronized修饰了,当一个线程获取了对应的锁,执行代码块时,其 ...

  2. java简单数据类型转化

    java简单数据类型,有低级到高级为:(byte,short,char)→int→long→float→double (boolean不参与运算转化) 转化可以分为 低级到高级的自动转化 高级到低级的 ...

  3. 【Alpha】Daily Scrum Meeting——Day7

    站立式会议照片 1.本次会议为第7次Meeting会议: 2.本次会议在上午大课间09:40,在禹州楼召开,本次会议为30分钟讨论昨天的任务完成情况以及接下来的任务安排. 燃尽图 每个人的工作分配 成 ...

  4. 201521123090 《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 继承与多态的概念与实现 父类与之类的关系 解决代码复用的办法 2. 书面作业 注释的应用 使 ...

  5. 201521123020《java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 finally 题目4-2 1.1 截图你的提交结果(出现学 ...

  6. 03标准对象-02-RegExp 正则表达式

    1.基本概念 和 定义 用一种描述性的语言来给字符串定义一个规则,你可以形象地理解正则表达式是一个"框",凡是符合大小形状条件的字符串,都算是"匹配"了. JS ...

  7. 基于jquery开发的UI框架整理分析

    根据调查得知,现在市场中的UI框架差不多40个左右,不知大家都习惯性的用哪个框架,现在市场中有几款UI框架稍微的成熟一些,也是大家比较喜欢的一种UI框架,那应该是jQuery,有部分UI框架都是根据j ...

  8. php-laravel4.0框架 简单快速入门

    前提必须已经安装好了laravel4.0版本. 写入权限: 安装完 Laravel ,你还需要为web服务器设置 app/storage 目录的写入权限. 目录结构: 安装完框架后,你需要熟悉一下该项 ...

  9. elasticsearch 中文分词、插件的安装和使用(一)

    1. 安装elasticsearch.kibana.x-pack #安装elasticsearch wget https://artifacts.elastic.co/downloads/elasti ...

  10. 月亮之眼_KEY

    [问题描述] 吉儿是一家古董店的老板娘,由于她经营有道,小店开得红红火火.昨天,吉儿无意之中得到了散落民间几百年的珍宝--月亮之眼.吉儿深知"月亮之眼"价值连城:它是由许多珍珠相连 ...