calc 的使用

通常情况下,一个元素节点使用固定定位absolute和固定定位fixed,会遇到一个问题,如果设置100% ,此时你在对他设置padding,border,margin,它就会撑满

具体情况如下图:

css3提供了一个属性方法calc;

.box {
  width: calc(100%-padding的值-border-width的值)
}

当然,这是css3的方法,在实际的项目中要加上前缀

你会得到效果类似下图

具体例子不举,因为比较简单,参考网址:http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

时间: 2024-10-10 12:37:57

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

css3案例之calc()的使用

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

calc(NOIP模拟赛Round 3)

原题: D e s c r i p t i o n 给三个正整数n,m和p,求(n^1+...n^m) mod p. Input 一行,三个整数n,m和p. Output 输出答案. S a m p l e  I n p u t 2 2 5 S a m p l e  O u t p u t 1 数 据 范 围 n,p<=10^8    m<=10^17 时 限 1s 首先看到m范围就知道是快速幂了对吧. 然后我们想想看.假如是平常的快速幂的话时间复杂度为O(M) TLE了对吧,然后我们想想有没

计算(calc.cpp)x 这题我搞了2晚上qwq

终于会了!可喜可贺!可喜可贺! 计算(calc.cpp) [问题描述] 小明在你的帮助下,破密了Ferrari设的密码门,正要往前走,突然又出现了一个密码门,门上有一个算式,其中只有"(",")","0-9","+","-","*","/","^"求出的值就是密码.小明数学学得不好,还需你帮他的忙.("/"用整数除法) [输入]

calc()使用笔记

calc()可以给元素做运算, calc(expression) eg: .a { width: -webkit-calc(100% - 2px); width: -moz-calc(100% - 2px); width: calc(100% - 2px); } 语法: 1.可以使用+ - * %()等运算符 2.可以使用百分比,px,em,rem计算其css属性 3.+ - 运算符前后必须有空格,* %可以没有,但为了保持一致性最好也加上 4.写时得考虑兼容性 兼容性: IE9+.FF4.0+

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

calc 多项式计算 (STL版和非STL版) -SilverN

计算(calc.cpp) [问题描述] 小明在你的帮助下,破密了Ferrari设的密码门,正要往前走,突然又出现了一个密码门,门上有一个算式,其中只有“(”,“)”,“0-9”,“+”,“-”,“*”,“/”,“^”求出的值就是密码.小明数学学得不好,还需你帮他的忙.(“/”用整数除法) [输入] 输入文件calc.in共1行,为一个算式. [输出] 输出文件calc.out共1行,就是密码. [输入样例]calc.in 1+(3+2)*(7^2+6*9)/(2) [输出样例]calc.out

CSS3的calc()用法简单介绍

CSS3的calc()用法简单介绍:calc是calculate(计算的意思)缩写.从calc()的外表来看,它类似于程序语言中的方法,具有计算功能.确实如此,它可以动态的计算css中一些元素的相关属性值,能够运用简单的"+"."-"."*"."/"四则运算.基本规则如下:(1).可以使用百分比.px.em.rem等单位.(2).可以混合使用各种单位进行计算.下面看几个代码片段: .box{ border:1px solid