calc()：css简单的数学运算

calc()：css简单的数学运算–加减乘除

多好的东西啊，不用js，一个css就解决了。

.box{
border:1px solid #ddd;
width:calc(100% - 100px);
background:#9AC8EB;
}
3栏等宽布局。

.box{
margin-left:20px;
width:calc(100%/3 - 20px);
}
.box:nth-child(3n){
margin-left:0;
}

运算规则

calc()使用通用的数学运算规则，但是也提供更智能的功能：

使用“+”“-”“*”“/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算。

浏览器支持
不是所有的浏览器都支持的
firefox 4.0+已经开支支持calc()功能，不过要使用-moz-calc()私有属性，chrome从19 dev版，也开始支持私有的-webkit-calc()写法，IE9这次则牛逼了一次，原生支持标准的不带前缀的写法了。Opera貌似还不支持～～

注意：

在http://www.qianduan.net/calc-at-at-at-page-intelligent-layout.html看到的，他的原文中width:calc(100%-100px)是没有空格的，经测试无效，就像其评论中：calc()里面的表达式好像要注意格式。

calc()：css简单的数学运算–加减乘除相关推荐

css简单的数学运算
calc()是css3的一个新增的属性, .box{border:1px solid #ddd; width:calc(100% - 100px); background:#9AC8EB;} 兼容 ...
ndarray 求和_Numpy ndarray 创建与简单的数学运算
初探Numpy import numpy as np data=np.random.randn(2,3) # 生成2行3列的多维数组对data进行数学运算: data*10 dat ...
【CSS3】css中的数学运算-calc()
一.什么是calc()? calc()从字面我们可以把他理解为一个函数function.其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度. 比如说 ...
360wi fi广告html,html+css简单的实现360搜索引擎首页面
今天主要学习了是如何实现的,以及我在写这个页面的时候我所遇到的一些困难. 主要实现是用代码的,不说废话了,其实我是想说我走的坑有哪些. 1.代码的基础不好,元素的一些属性不熟悉,对于HTML和css还 ...
JS基础——数学运算
文章目录 JS中的数学运算模板字符串布尔类型 !的用法 !=:不等于 !取反:把!后的字符转化为布尔类型,然后再取反. !!在一个布尔类型的基础上取反再取反,相当于转化为布尔类型. null和un ...
P2759 奇怪的函数（二分答案，数学运算）
P2759 奇怪的函数范围2e92e92e9,直接枚举肯定超时,正着直接求答案求不出来,那么运用逆向思维,直接二分答案判断即可.这道题涉及简单的数学运算. 要xx>=nx^x>=nxx& ...
js进行数学运算，加法，减法，乘法，除法
1.简单的数学运算 // 加法 const accAdd = (arg1, arg2) => {var r1, r2, m;try {r1 = arg1.toString().split(&qu ...
c语言中的加减乘除字母,简单的c语言加减乘除运算
简单的c语言加减乘除运算答案:6 信息版本:手机版解决时间 2019-10-03 12:11 已解决 2019-10-03 00:06 简单的c语言加减乘除运算最佳答案 2019-10-03 ...
c语言计算器取百分数,c语言计算器程序设计包含加减乘除简单的函数运算
c语言计算器程序设计包含加减乘除简单的函数运算 c语言计算器程序设计包含加减乘除简单的函数运算人气:258 ℃时间:2020-03-28 13:19:41 优质解答实用计算器之程序设计 [摘要] ...

calc()：css简单的数学运算–加减乘除

calc()：css简单的数学运算–加减乘除相关推荐

最新文章

热门文章