css3--calc()使用

css3新增的一个功能,可以计算元素的长度

例如说:一个百分百布局中,分左右两侧,中间需要一个分隔空间,使用padding或者margin则会超出100%,这时候使用calc()来计算 就很完美

calc()运算规则

  1.可以使用 + - * / 四则运算

  2.可以使用px em rem %等单位

  3.可以混合使用各种单位计算

  4.使用 + - 运算时,符号前后必须有空格

  5.使用 * / 运算时,前后可以没有空格,但是建议留有空格

calc()兼容

  pc端兼容还可以 IE9 ff4.0+  chrom19+

  移动端兼容不太好 只有 firefox for android 14.0”支持

使用的时候建议加上前缀

  

使用

效果如下  全屏100%展示 左右两边有10px间距

width:calc(33.3333% - (10px + 5px) * 2 - 15px )

意思是(width-(padding+border)*2-margin)

  • 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
  • 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com

css3-calc用法的更多相关文章

  1. css3 calc()的用法

    转载自:css3 calc()的用法 说明:calc(四则运算):任何长度值都可以使用calc()函数进行计算:和平时的加减乘除优先顺序一样一样的: 特别注意:calc()里面的运算符必须前后都留一个 ...

  2. css3 calc():css简单的数学运算-加减乘除

    css3 calc():css简单的数学运算–加减乘除 多好的东西啊,不用js,一个css就解决了. .box{ border:1px solid #ddd; width:calc(100% - 10 ...

  3. css3 calc()

    概述 CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状. 你还可以在一个calc()内部嵌套另一个calc(). ...

  4. CSS3 calc()函数使用

    1.calc是什么? calc是英文单词calculate(计算)的缩写,用于动态计算长度值. calc()函数支持 "+", "-", "*&quo ...

  5. border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题

    box-sizing box-sizing的CSS属性是用来改变默认的CSS框模型 属性 初始值:content-box 适用于:接受的所有元素的宽度或高度 继承:无 媒体:visual 指定的:as ...

  6. calc 用法以及原理

    CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作.例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和. 它是CSS预处理器 .foo { width: 100 ...

  7. CSS3 calc()的使用

    前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有marg ...

  8. css3 calc()方法详解

    calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性 ...

  9. CSS3 calc() 会计算的属性

    calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值. ...

  10. 三栏布局之 css3 calc和 flex

    圣杯布局的实现,有很多种. 大致都是借助 padding, margin, float之类的,当然这是传统的实现方式.更多的参考方式圣杯布局小结. 这里说的是用css3 cal 和flex来实现,因为 ...

随机推荐

  1. 清澄 A1485. Catch The Penguins 抓企鹅

    试题来源 2013中国国家集训队论文答辩 问题描述 Xyz带着他的教徒们乘着科考船一路破冰来到了南极大陆,发现这里有许许多多的企鹅.邪恶的Xyz想要抓很多企鹅回去开动物园,当宠物玩.但动物保护协会很快 ...

  2. ado:SqlDataAdapter,dataset 与SqlDataReader的用法一

    原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

  3. PhPStorm 快捷键使用(转载)

    PhPStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具,PhpStorm可随时帮助用户对其编码进行调整,运行单元测试或者提供可视化debug功能.Phpstrom的一款名 ...

  4. hdu 1099(数学)

    Lottery Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  5. React native 横滑效果

    import { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity, ScrollView, Di ...

  6. 使用vue-cli搭建element-ui项目

    最近在使用element-ui搭建项目时发现若只纯用webpack来运行element-ui,要配置各种文件,对于新手来说实在太不友好了, 就想到用vue-cli来搭建整个vue项目 1.安装node ...

  7. Noip2017赛前的一些记录

    前言 已经退役整整五个月了....选考以后终于又摸上了键盘.... 但是码力已经大不如前了........ 距离比赛也就只有一星期了....那就胡乱的做一些题目吧QAQ 这里是一些根据算法分类的咋杂题 ...

  8. 使用viewPage实现图片轮播

    概述 图片循环播放这种效果,在许多的场合都能看到,只要一打开各大主流网站的首页几乎都有一个这样的组件,它可以很显目的提供给用户最近最火热的信息.因为它应用得如此之广泛,今天,我们就来写一下这个组件. ...

  9. nodeJS一些事儿

    node-webkit:开发桌面+WEB混合型应用的神器[大漠穷秋] 展望未来 其实这条路老早就有人在走 网上有很多人在争论,未来究竟是原生的应用会胜出,还是WEB APP会胜出,实际上这两者并不是你 ...

  10. mysql insert into 时报1062错误

    插入数据库时报1062错误,并没有错误详解 而网上的原因大多是主键重复,找了半天并没有解决办法 最后发现是表设置了联合唯一 ,插入的数据和之前的一样 >_< 太真实了