css3-calc

Css3 calc可使用简单的数学运算计算宽度

calc是单词calculate的缩写,是Css3的一个新的长度单位函数,可以使用简单的数学运算.

Firefox要使用-moz-calc()私有属性,

Chrome要使用-webkit-calc()私有属性,

IE9原生支持标准的不带前缀的写法,

Opera暂还不支持.

运算规则

可以使用 “+” “-” “*” “/” 四则运算(”+”、”-”两个符号边上必须要有空格，而”*”、”/”符号则不是必须的),

可以使用百分比、px、em、rem等单位,

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.content {

    border:1px solid #000;

    /* ‘+’ ‘-’ 符号左右两边加空格 */

    width:calc(100% - 2px);

}

.content2 {

    /* ‘+’ ‘-’ 符号左右两边加空格 */

    width:calc(10em + 10px);

}

/*三栏等宽布局*/

.content3 {

    margin-left:20px;

    /* ‘+’ ‘-’ 符号左右两边加空格, ‘*’ ‘/’ 符号可不加 */

    width:calc(100%/3 - 20px);

}

/* n为从0开始的乘数,依次递增1,如:3*0,3*1,3*2等相乘结果后的子元素 */

.content3:nth-child(3n){

    margin-left:0;

}
时间： 2024-10-13 14:47:29

css3-calc的相关文章

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() 会计算的属性

CSS3 calc() 会计算的属性 calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin.pading.font-size和width等属性设置动态值. 以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距.现在我们又多了一个选择了.但要注意,两者只能使用一个哦,否则就会造成冲突了. 怎么使用 calc()可以使用数学运算中的简单加(+).减(-).乘(*)和除(/)来解决问

圣杯布局之 css3 calc和 flex

圣杯布局的实现,有很多种. 大致都是借助 padding, margin, float之类的,当然这是传统的实现方式.更多的参考方式圣杯布局小结. 这里说的是用css3 cal 和flex来实现,因为css有限,有不当或者错误之处,敬请指出. css3 cal 的支持情况,总体 93%. flex布局的支持情况, 总体97% 为了增加复杂度 1. 块之间有间距 2. 有 border 3. 都采用了 box-sizing: content-box 先看 calc的实现 <!DOCTYPE htm

css3 calc()方法详解

calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc().因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过.今天花了一下午的时间彻底学习了一下calc().于是就有了这篇blog,希望对大家有所帮助. 平时在制作页面的

CSS3 calc()的使用

前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破.我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模式).这样一来就会相当的麻烦,平时我们碰到这样的现象时,也是相当的谨慎,有时甚至无法解决,

css3 calc()属性介绍以及自适应布局使用方法

前端知识 Calc()介绍 calc的英文是calculate的缩写,中文为计算的意思,是css3的一个新增的功能,用来只当元素的长度.比如说:你可以用calc()给元素margin.padding.border.font-size和width等属性设置动态值.为什么说是动态值呢?因为我们是使用来表示得到的值.不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度. Calc()的用处 calc()能让你给元素的做计算,你可以给一个div元素,使用百分比.em.px

css3 calc()功能

cacl()是一个新的长度单位功能,可以使用通用的数学规则进行计算. cacl()运算规则: 1. 使用“+”“-”“*”“/”四则运算: 2. 可以使用百分比.px.em.rem等单位: 3. 可以混合使用各种单位进行计算. 例: .box{ border:1px solid #ddd; width:calc(100% - 2px) } //box的宽度加上边框宽度是100% 注:”+”.”-“两个符号边上必须要有空格,而”*”.”/”符号则不是必须的.

css3的calc()属性

1.calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border.margin.pading.font-size和width等属性动态的设置值. 2.calc()语法 1 .element { 2 width:calc(expression); 3 } 3.calc()的运算法则 1).使用 "+"."-"."*" 和 "/" 运算 2).可以使用百分比.px.em.rem等单位运算

CSS3 新特性（box-sizing盒模型，filter滤镜，calc函数，transition过渡）

1.盒子模型(box-sizing) CSS3 中可以通过 box-sizing 来指定盒模型,有两个值:即可指定为 content-box.border-box,这样我们计算盒子大小的方式就发生了改变. 可分为两种情况: 1. box-sizing:content-box   盒子大小为 width + padding + border(默认) 2. box-sizing:border-box     盒子大小为 width 如果盒子模型我们改为了 box-sizing:border-box,

了解CSS/CSS3原生变量var

一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了. Chrome/Firefox/Safari浏览器都是绿油油的,兼容性大大超出我的预期,于是果断尝鲜记录下语法用法和特性. 二.CSS变量var()语法和用法和特性 CSS中原生的变量定义语法是: