四则运算 calc()

它的出现还真的蛮令人惊喜的,很适用于百分比宽度。之前我们有box-sizng,而今又多了一个它,并且,calc的实用性更高。我们可以在border、margin、pading、font-size和width等属性上做一些加减乘除,简单拿width举例:

.wrap {
background-color: #dee;
height: 200px;
padding: 40px;
display: inline-block;
width: calc(100% - 2 * 40px);
}

书写注意点:

width: calc(100%-2*40px);//错误的写法

(这是我在测试的时候踩的坑→ →)

运算符前后加一个空格,不然浏览器可能会无法识别哟~~

其它貌似也没有什么了,最后看一下兼容性吧,:)

时间: 2024-10-22 22:04:08

四则运算 calc()的相关文章

calc()

代替怪异盒模型.box-sizing:border_box; 什么是calc()? 学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运用中更好的使用他. calc()从字面我们可以把他理解为一个函数function.其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度.比如说,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值.为何说是动

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

css3 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()使用通用的数学运算规则,但是

软件工程附加篇章:进阶四则运算和Core对接

0x01 :计算模块(Core)和前端对接 首先特别结对编程刘乾组(SivilTaram)提供的计算模块(Core),http://www.cnblogs.com/SivilTaram/p/4859934.html 在Core模块的说明文档中,我们可以清晰发现在计算模块Core主要实现了表达式计算.四则运算表达式生成.题目文件和答案文件的审核的功能: 但在设计思路上:          在整体的设计思路上,SivilTaram组的Core模块同样将写入和读取文件的逻辑封装在计算模块中:但在自己的

四则运算的实现

闲来无事,写个四则运算的计算式[包括+,-,*,/,没有括号]: 代码如下: #include <iostream> #include <stack> #include <string> using namespace std; class Calc { public: int judge (const string &str) { if (str.find ('=') == string::npos) { cout<<"input err

css3案例之calc()的使用

calc()是个什么鬼?相信对css3研究比较深入的童鞋对这个函数的作用及用法还是比较熟悉,对于web前端新人而言,这个函数还是比较陌生.其实calc()是css3的一个新增功能,用来指定元素的长度,我们也可以把它理解为一个函数的function.今天小编就和大家分享一下CSS3的calc()的作用及具体用法. calc()能做什么? CSS3中calc()具体有什么用处呢? calc()不仅可以给元素的border.margin.pading.font-size和width等属性设置动态值,在

【实践】js实现简易的四则运算计算器

最近看了一个大神推荐的某公司面试程序员的js 面试题,题目是用js 做一个计算器于是跟着大神的思想自己做了一下 ps:功能还没有完善好毕竟自己还是一只菜鸟还在不断学习中. 闲话不多说先上css代码 <style type="text/css"> *{ padding: 0px; margin: 0px; border: 0px; } .wrapper{ border: 5px solid #000; width: 300px; height: 400px; margin:

结对编程:四则运算。组员:闫浩楠 杨钰宁 开发语言:C语言

需求分析:1.能够自动出题并给出答案 2.包含“+,—,*,/,()” 的四则运算. 3.显示题目的答案 结构设计:1.自动出题用随机数生成语句实现:包括随机生成数字.运算符号和题目长度 2.用变量约束左右括号顺序和同时存在的特点.    3.将题目输出并用字符串存储.    4.对字符串入栈进行运算. 部分核心代码: 随机生成题目长度: a=rand()%3+3;for(i=0;i<a;i++){ ……} 随机生成数字及符号: c=rand()%19+1; //数字 printf("%d

CSS3的calc()使用

转自:http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点 也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让 我不得不想起calc().因为早先在官网和一些blog上看到相关的介绍,但一直没有

css之calc();

关于calc()这个css函数,有太大的作用了,相信熟悉css的朋友们,对这个函数都不会陌生,如果你属于这一类,那么你可以跳过了,因为这篇也没什么很重要的,只是对它的一些基本的介绍. 好了我是怎么开始接触到这个属性的呢,一定是当时遇到了什么问题,然后才发现了有这种方法.见下图: 那么由于要实现这种效果,开就真的用到这个css函数了,不然就得用js来做了,就太麻烦了.(如果这个例子有点牵强将将就一下吧),于是我与calc()就这样在茫茫码海中见面相遇了. calc()是可以在任何地方使用的<len