CSS3实例教程：详解calc()函数功能
calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？
calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。因为看其外表像个函数，既然是函数为何又出现在CSS中呢？这一点也让我百思不得其解，今天有一同事告诉我，说CSS3中有一个属性能实现自适应的布局，首先让我想到的是box-sizing，但跟我说还可以计算，这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍，但一直没有深入，也没有自己去测试过。今天花了一下午的时间彻底学习了一下calc()。于是就有了这篇blog，希望对大家有所帮助。
平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异模式）。这样一来就会相当的麻烦，平时我们碰到这样的现象时，也是相当的谨慎，有时甚至无法解决，只能通过改变结构来实现。就算你通过繁琐的方法实现了，但有于浏览器的兼容性而导致最终效果不一致。虽然前面介绍的CSS3属性中的box-sizing在一定程度上解决这样的问题，其实今天的calc()函数功能实现上面的效果来得更简单。
什么是calc()?
学习calc()之前，我们有必要先知道calc()是什么？只有知道了他是个什么东东？在实际运用中更好的使用他。
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。
calc()能做什么？
calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说&width:calc(50% + 2em)&，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。
calc()语法
calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：
width: calc(expression);
其中&expression&是一个表达式，用来计算长度的表达式。
calc()的运算规则
calc()使用通用的数学运算规则，但是也提供更智能的功能：
使用&+&、&-&、&*& 和 &/&四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有&+&和&-&时，其前后必须要有空格，如&widht: calc(12%+5em)&这种没有空格的写法是错误的；
表达式中有&*&和&/&时，其前后可以没有空格，但建议留有空格。
浏览器的兼容性
浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有&firefox for android 14.0&支持，其他的全军覆没。
大家在实际使用时，同样需要添加浏览器的前缀
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
通过上面的了解，大家对calc()不在那么陌生，但对于实际的运用可能还是不太了解，那么大家就接下来跟我一起动手，通过实例来了解他吧。首先我们来看一个最常用的实例：
&div class=&demo&&
&div class=&box&&&/div&
上面的结构很简单，就是一个div.demo的元素中包含了一个div.box的元素，接下来我们一步一步来看其中的变化。
第一步：添加普通样式：
width: 300
background: #60f;
width: 100%;
background: #f60;
height: 50
此时的效果很简单，就是div.box完全遮盖了div.demo，如下图所示：
第二步，在div.box上添加border和padding
这一步很棘手的事情来了，在div.box上添加10px的内距padding，同时添加5px的border：
width: 300
background: #60f;
width: 100%;
background: #f60;
height: 50
padding: 10
为了更好的说明问题，我在div.demo上添加了一个padding：3px 0;
width: 300
background: #60f;
padding: 3px 0;
width: 100%;
background: #f60;
height: 50
padding: 10
这个时候大家不知道能否想到问题会发生在哪？其实很简单，这个时候div.box的宽度大于了其容器div.demo的总宽度，从而撑破容器伸出来了，如图所示：
第三步，calc()的运用
为了解决撑破容器的问题，以前我们只能去计算div.box的宽度，用容器宽度减去padding和border的值，但有时候，我们苦于不知道元素的总宽度，比如说是自适应的布局，只知道一个百分值，但其他的值又是px之类的值，这就是难点，死卡住了。随着CSS3的出现，其中利用box-sizing来改变元素的盒模型类型实使实现效果，但今天我们学习的calc()方法更是方便。
知道总宽度是100%，在这个基础上减去boder的宽度（5px * 2 = 10px）,在减去padding的宽度（10px * 2 = 20px），即&100% - (10px + 5px) * 2 = 30px& ，最终得到的值就是div.box的width值：
width: 300
background: #60f;
padding: 3px 0;
background: #f60;
height: 50
padding: 10
width: 90%;/*写给不支持calc()的浏览器*/
width:-moz-calc(100% - (10px + 5px) * 2);
width:-webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);
这样一来，通过calc()计算后，div.box不在会超出其容器div.demo的宽度，如图所示：
上面是一个简单的实例，接下来我们一起来看一个自适应布局的例子：
上面的demo是一个非常简单而常见的布局效果，在这个布局中，我采用了自适应布局。整个布局包含了&头部&、&主内容&、&边栏&和&脚部&，并且&主内容&居左，&边栏&靠右，具体结构请看DEMO中的html部分。
接下来，我们主要看看css部分：
1、在body中设置一个内距，并附上一些基本的样式，大家可以根据自己需要进行不同的设置，此例代码如下：
background: #E8EADD;
color: #3C323A;
padding: 20
2、设置主容器&wrapper&的样式
主容器的宽度是&100% - 20px * 2&,并且水平居中：
.wrapper {
width: 1024 /* Fallback for browsers that don't support the calc() function */
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
给不支持calc()的浏览器设置了一个固定宽度值&1024px&。
3、给header和footer设置样式
这个例子中的header和footer很简单，给他们添加了一个内距为20px，其他就是一些基本的样式设置，那么其对应的宽度应该是&100% - 20px * 2&：
background: #f60;
padding: 20
width: 984/*Fallback for browsers that don't support the calc() function*/
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
background: #000;
padding: 20
width: 984/* Fallback for browsers that don't support the calc() function */
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
4、给主内容设置样式
给主内容设置了一个8px的边框，20px的内距，并且向左浮动，同时设置了一个向右的外边距&20&px，关键之处，我们主内容占容器宽度的75%，这样一来，主内容的宽度应该是&75% - 8px * 2 - 20px * 2&:
border: 8px solid #B8C172;
margin-bottom: 20
margin-right: 20
padding: 20
width: 704 /* Fallback for browsers that don't support the calc() function */
width: -moz-calc(75% - 20px * 2 - 8px * 2);
width: -webkit-calc(75% - 20px * 2 - 8px * 2);
width: calc(75% - 20px * 2 - 8px * 2);
4、设置右边栏样式
给边栏设置了一个25%的宽度，其除了包含8px的边框，10px的内距外，还有主内容外距20px也要去掉，不然整个宽度与容器会相差20px,换句话说就会撑破容器掉下来。因此边栏的实际宽度应该是&25% - 10px * 2 - 8px * 2 -20px&:
#accessory {
border: 8px solid #B8C172;
padding: 10
width: 208 /* Fallback for browsers that don't support the calc() function */
width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);
width: calc(25% - 10px * 2 - 8px * 2 - 20px);
这样一来，大家就看到了上面demo展现的布局效果。经过此例的学习，大家是不是会觉得使用calc()用于自适应布局是超爽的呀。此时有很多同学肯定会感吧，苦逼的IE6-8不支持，不敢使用。
最后在给大家提供一个heihgt的实例：
时隔好久没有写blog，不知道大家对calc()整明白了没有，要是没有的话，继续动手写几个例子吧。如果您有更好的分享，记得告诉我们哟。
加入和大家一起交流,相互学习,共同提高.
　下一篇：
相关文章和赞助商广告
赞助商信息网页设计趋势变化的是如此之快，以至于我们甚至还没来得及全部体会，有的便已过时。所以，预测某个设计趋势会流行多久压根就是个伪命题。在21世纪初的时候，Flash曾被视为最热门的网页设计工具;而在几年前，富有光泽的按钮也是网页上必不...
阅读排行（不包括素材和gif）　 　 　 　 　 　 　
手把手教你从零基础开始学绘画和素描
今天狗蛋儿同学分享了一篇特别棒的文章，非常细致且有步骤地给我们讲了自学素描的过程要领和重难点，对画画感兴趣的同学强烈推荐阅读。
今天狗蛋儿同学分享了一篇特别棒的文章，非常细致且有步骤地给我们讲了自学素描的过程要领和重难点，对画画感兴趣的同学强烈推荐阅读。
狗蛋儿：首先，我做了关于 分析素描的表格。
然后 我再拿出对初学者来说比较重要的来重点说明一下~\(RQ)/~
刚开始学素描的时候 老师就让们我狂练线条。 线条的美感会直接影响整个画面，不止素描，只要和一切手绘有关的，线条都起着举重若轻的作用。
线条栗子：
A.擦后排线
C.侧锋排线
F.排线后擦（指把排好的线条用手或其他工具按轻重揉，我们老师喜欢用馒头~\(RQ)/~）
I.中锋排线
错误线条栗子：
这是线条不太好看导致画面凌乱的栗子：
阿喂 乃们不要笑哇~ 这是初学者都要经历的过程 想当初 答主还被全班狠狠嘲笑过 全班不画画 都来笑我 是要闹哪样 阿摔（s#-皿-)s~~kTk&
&&&&&&&&&&&&&&&&&&干货分界线&&&&&&&&&&&&&&&&&&
关于线条教学视频链接：
我找了很久 关于线条的教学视频太少了 大家将就将就吧/(ㄒoㄒ)/~~
这个炒鸡重要！！&
一、可以帮助理解对象。
素描基础训练目的并不只是在技巧如何表现物象，更重要的是要学会正确的观察和理解物象的造型特征，把握物象的本质结构和普遍的造型规律。这实际上是一个积极的理性思维过程，只有在形体、结构准确的前提下才有进一步的研究光影、质感、明暗调子的可能性和必要性。
二、解决&形&画不准
在学生练习和考试中，有很多形把握不准，偏差很大的情况，一方面是其造型能力弱，练习不扎实造成的，究其更深原因也是对对象结构理解不够，缺少结构间相互联系相互依存的理解。为了画准对象的形体，我们必须掌握一套正确实用的观察方法，了解一些认识对象的基本原则，并在大量的训练中逐步熟练掌握，从而达到造型准确的目的。其中包括理解、概括、比较等方法。
三、在&散光&情况下可以画出对象体积
在面对不打光的物体，完全可以在平时训练中抛开物体表面的明暗光影，直接分析所画物体中内在的结构线，通过线条来描绘对象的体积，这样不管光线多散也可以很好的表现出来。
这是结构素描的栗子：
（我按照我们老师给我们训练的顺序来排图，题主可以参考这个顺序对自己的素描学习做调整q(s3t)r)
初学者可以先练习 几何结构单体
然后 按照自己的学习进度 可以练习 几何体组合（各种角度都要练习到噢）
这个阶段最好还是买些书 对着书临摹 一本大概十几个暖男币
练完 几何组合 可以加单个静物，或者先练单个静物再和几何体组合都可以。
我们那时候 练习的第一个静物 就是苹果 简直画到吐。
这时候就需要 买进阶书了 栗子：
现在 可以画简单的静物组合 然后根据自身情况加大难度 画一些复杂的。
静物组合的书，栗子：
静物结构 之后是 石膏人头像（这个条件较高，不行同学们可以网上搜一下图，对着画）
终于到了 我认为素描逼格最高的时候了：人头像
人头像画好了，把妹子、泡汉子什么的 简直太容易了，话说我基友传授给我经验，要到汉子扣扣，对他说：&我帮你画张属于你的素描人头像，好么？&
然后 汉子就屁颠颠的 给了好多 照片， 要到照片后， 厚脸皮的说 & 其实我不会画&
啊哈哈哈哈哈 屡试不爽阿 此法对妹子也很管用
&&&&&&&&&&&我是人头像结构素描分割线&&&&&&&&&&&&&
要画好人头像 必须要了解 人像解剖
比较详细的讲解 链接
天朝永远不缺书：
干货时间（其实这些都是我在网上搜的 咩哈哈哈）
几何结构示范
关于静物苹果的结构示范
结构静物组合示范
石膏结构头像示范
人头像结构示范
3.透视 本来这个可以和结构一起讲，但是透视对于初学者来说有点略难的。
想当初 学透视的时候 答主 可是 边哭边画边被骂
所以，我决定把这个傲娇怪 单独召唤粗来
*透视有很多种类 学习素描的话 掌握一些比较基础的透视种类就足够了
*基础透视栗子（直接上图 关于理论讲解方面 答主会贴出视频的咩）：
①一点透视（也称为 平行透视 可简单理解为 所有物体向一个消失点消失）：
下面便于理解 贴出生活中比较典型的一点透视的栗子：
再来个最经典的
一点透视在素描中的应用：
②两点透视（也称成角透视，物体向两个消失点消失）：
生活中的栗子：
两点透视在素描中的应用：
③三点透视（物体向三个消失点消失）：
三点透视素描中的应用：
应用毛阿 为毛我早没发现这个链接：
我可是找图找的手都僵掉了呢
关于透视，答主现在学的是室内设计，有专门的课学了透视 所以&上干货
好啦&为了让题主充分理解 结构和透视 在素描中有多么重要 答主找一些栗子
如果结构和透视不理解 会这样：
看到这些图 答主想到 当初集训时，本大王有一次做人像模特 班里有个男森 竟然把 答主画成了 充气娃娃！！！！！
我擦！充气娃娃阿！！！
我是跟你有多大仇恨 一定要这样么！！ 啊摔（s#-皿-)s~~kTk
更过分的是 老师竟然还组团去看 招呼全班别画了 都来看他的画 要不要这么忽视我！！
还对我和那张画进行了 惨无人道的对比 并且强制我和它合影
这样真的好嘛老湿 你们有没有想过那幅画的感受
虽然 我不可能告诉你们 我也看着那幅画笑趴了 还愉快的合了影
4.明暗五调子
素描的意义不仅仅在于描绘或再现一个物体，更重要的是在画面上处理好每个物体间不同的明暗表现，这是一幅画的基础和本质，这就要求我们再现对象时，首先找到对象内在的及相互的明暗关系，这对画面极为重要，可以说明暗表现的成功与否，关系到整幅素描的最终成败，它也是评价素描好坏的标准。掌握素描的明暗表现，是画出高水平素描的关键。
是以明暗调子来塑造对象，其主要方法是通过高光、亮面、明暗交界线、暗面、反光的的表现，来反映客观对象的体积、空间、虚实、结构等，强调素描艺术的直观真实性。
明暗交界线：是非常重要的一个部位，因为它的位置处于形体大的转折处，它其实不是一根线，而是由很多的面构成的，所以画的时候要有的地方画的实一点，有的地方画得虚一点，明暗交界线是全画面中最暗的地方，是重点画的的地方。
反光：是环境给物体的暗鄣的光，色调层次不可过亮，不可以超过灰层次，否则会使画面过花。
投影：指投在地面上的影子，它形状是变化很丰富的，在画的时候一定要搞清它来龙去脉。 画典型的几何体立方体的时候，它有着（黑－白－灰） ，引申到其它的复杂物体，都应把它们总结成三大面来画。
五调子是西方绘画体系中素描教学所用到的专业术语。
五调子：是指具有一定形体结构、一定材质的物体受光的影响后在自身不同区域所体现的明暗变化规律。
高光：受光物体最亮的点，表现的是物体直接反射光源的部分，多见于质感比较光滑的物体。
亮灰部：高光与明暗交界线之间的区域。
明暗交界线：区分物体亮部与暗部的区域，一般是物体的结构转折处。（明暗交界线不是指具体的哪一条线，它的形状、明暗、虚实都会随物体结构转折发生变化。）
反光：物体的背光部分受其他物体或物体所处环境的影响的部分。
投影：物体本身遮挡光线后在空间中产生的暗影。
素描基础教学中常用石膏体举例说明如何区分&五调子&。
当然还有万能的苹果
静物明暗分析栗子
【明暗的练习步奏 可以根据我对结构练习的步奏来走 比如 可以先练习单个石膏几何体 明暗调子练习 然后再练 组合 然后单个静物等】
&&&&&&&&&&&&&&&&&&干货分界线&&&&&&&&&&&&&&&&&&
明暗调子：
【下面提供的视频是 集训时 我们老师给我们看过的教程 我觉得还不错可以找得到的资源就 贴出来】
人像素描：&
静物素描：&
石膏头像素描：
还有个视频也很好 暂时想不起来了 想起来了再补上
有了对素描基础的认识后，童鞋们只需要玩命的练，量变是真的可以达到质变，如果你没有老师是自学的话，可以去素描吧 或各种素描论坛把自己的画上传上去，让大神们指出错误并改正会事半功倍。
如果有学过素描的朋友一定玩命的巴着他，每画一幅画就找他点评，有没有一个可以指点你的人，这对你的画画水平能否突飞猛进至关重要。
还有，要多看，看结构严谨构图均衡的画，模仿他。看透视正确，线条乱中有序的画，模仿他。
临摹对初学者非常重要 ， 当然不能只是一味只是照着画 单纯模仿，而是要边画边想，思考你临摹物体的结构和作者为什么要选这个角度，为什么要这样构图，为什么这么排线，明暗是根据什么来画的。
我们刚画画的时候，很多人都会把东西画变形，画的很怪异很好笑，我们都是一下课就奔向各个地方找乐子。
老师对我们说：你们有的人 ，看别人画的不好就笑，笑完之后却不知道自己画的也很可笑，而另外一些人虽然也会笑 但他会观察别人为什么画的不好，然后联系自己看自己有没有犯这种错误从而改进，像这种人，你们是永远没机会嘲笑他，因为他们永远跑在你们前面。而你们会被嘲笑一辈子。
我觉得老师的话 适用于任何事。所以懂得思考的人是不会被嘲笑的。（表情严肃）
&&&&&&&&&&&&&&励志分割线&&&&&&&&&&&&&&
当初学美术 是我爸爸逼着我学的 ， 因为我成绩太渣了，原先对美术真的没有太大兴趣，反而觉得自己 音乐上更有天赋 哈哈哈哈q(s3t)r
经过那一段逆天的集训之后 我发现自己竟然森森爱上画画了。
（我真的不是奇葩q(s3t)r） 觉得那些优秀的 被时间见证的画实在太震撼人心了
虽然那段时期 每天从头到脚都是黑的 指甲里都是碳粉 每天要洗两次澡，洗出来都是黑色的水，所以，乃们不要瞧不起艺术生了，我们真的很心酸的。
我妈妈每次都会无比认真的问我 是不是逃课 挖煤去了r(st)q
但是 直到现在一直都很 感谢那段时光，让我接触到如此美好的精神食粮。
说这些 其实就是想让题主能够坚持学素描，不管题主是不是一时兴起还是怎样，至少可以说明题主是喜欢它的 ，只要你认真对待它 它就永远不会辜负你。
我现在还记得 我当初给我爸爸画的那副人头像 送给他的时候，他激动的表情，直到现在那幅画还被他收藏着在，逢人便夸，虽然那幅画 在现在的我看来 ，简直不忍直视。但是 它能给我爱的人带来快乐 这就够了。希望你也能在素描中获得这种感觉。
所以，为了激励那些喜欢画画的人能坚持下去 我要给你们一大波图！
虽然这些图在网上就可以搜到 咩哈哈哈哈
以上的图均来自网络，没有任何恶意，如果作者觉有冒犯请联系我，我会道歉并删除的。
加入和大家一起交流,相互学习,共同提高.
　下一篇：
相关文章和赞助商广告
赞助商信息思缘设计论坛的六周年做的PS电子书,各个方面的教程谁有_百度知道
思缘设计论坛的六周年做的PS电子书,各个方面的教程谁有
思缘设计论坛 六周年做的PS电子书,各个方面的教程都有的：2012年最新PS教程15000例,附件为实例电子书附免费笔刷发 的邮箱
提问者采纳
共7大类,字体教程;思缘论坛&quot,里面都是实例的教程电子书里面涵盖以下内容,个性签名教程,照片转手绘教程：2012年最新PS教程15000例,附件为实例电子书附免费笔刷邮件的附件CHM格式的就是电子书,调色教程;就可以找到论坛了我发给你一套思缘设计论坛的六周年PS教程电子书:设计教程,照片处理教程学习PS首先推荐比较好的PS站点,合成教程,共168篇教程邮件的名字是,思缘设计论坛思缘论坛是国内PS学习好的一个网站直接百度搜索&quot
提问者评价
其他类似问题
您可能关注的推广回答者：
电子书的相关知识
其他2条回答
论坛上不都有吗？
如果有麻烦也发到
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}