calc()语法:

  elem{

    width:calc( 50% -2px );

  }

  取值说明:

    calc是计算的缩写,上句含义是:计算elem父元素的50%再减2px,并将结果赋值给elem的width属性

calc()能做什么:

  calc()可以通过动态的计算来得到元素的宽度或者高度。

  例如:width:calc(50% - 2px)。当为元素设置了2px的边框时,通过这样的计算就可以避免因超出而折行。

  可以使用 + - * / 等运算符来进行计算

  注意:表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;

兼容性:

  IE9+、FF4.0+、Chrome19+、Safari6+支持该属性,也就是说现在仍然需要兼容的IE8并不适用,开发时如果使用该属性,需要考虑通过hack的方式兼容IE8

  

css3整理--calc()的更多相关文章

  1. CSS3的calc()使用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. CSS3表达式calc( )

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

随机推荐

  1. 总结·展望

    学了算法也有半年了.也是学期末,确实是该总结了.半年来说不上多努力,毕竟不如高中那时候早晨5点起晚上12点睡,但也确实学到不少东西(尽管眼下来说根本用不到并且我也不确定以为会不会去用.毕竟专业放在那里 ...

  2. Git -- 本地 一个相同的新的分支 并 推送到远程仓库

    (一).创建本地分支 git checkout -b 新分支名 执行该指令后,会在本地创建一个新分支,该分支是从当前分支上检出的,所以所有文件内容都和当前分支一模一样,这是正常的.创建成功后,将自动切 ...

  3. conda虚拟环境

    https://blog.csdn.net/lyy14011305/article/details/59500819 1.首先在所在系统中安装Anaconda.可以打开命令行输入conda -V检验是 ...

  4. 微服务平台(Micro Service Platform : MSP)旨在提供一个集开发、测试、运维于一体的开发者专属平台,让开发者能快速构建或使用微服务,让开发更简单,让运维更高效。

    微服务平台(Micro Service Platform : MSP)旨在提供一个集开发.测试.运维于一体的开发者专属平台,让开发者能快速构建或使用微服务,让开发更简单,让运维更高效. MSP采用业界 ...

  5. install pymongo,mysql

    yum install pymongo yum install MySQL-python

  6. js手机适配

    代码一: <script type="text/javascript"> function mobile_device_detect(url){ var thisOS= ...

  7. EntityFramework CodeFirst反向工程工具

    EntityFramework Reverse POCO Generator https://marketplace.visualstudio.com/items?itemName=SimonHugh ...

  8. 使用Github添加标签

    Github为我们提供了在页面上进行编辑发行版本的方式,如下图所示: 在Github上为项目打tag可在release页面,选择创建新tag并按下图所示填写即可.删除tag也同理.

  9. 【asp.net core】Publish to a Linux-Ubuntu 14.04 Server Production Environment

    Submary 又升级了,目录结构有变化了 . project.json and Visual Studio 2015 with .NET Core On March 7, 2017, the .NE ...

  10. void java.lang.System.gc()

    void java.lang.System.gc() Runs the garbage collector. Calling the gc method suggests that the Java ...