初探CSS3中的calc()作用

日期:2021-03-05 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

以前,大家要想完成1个完善的宽度自融入的键入框好不便,以前也被做为对前端开发技术性的1个挑戰。相近的普遍情景也有100%宽+边框的器皿等。遇到这些状况,大家迫不得已格外当心,由于各个访问器的主要表现将会不1致。

如今,firefox和webkit陆续适用calc()作用了,大家还可以学习培训下了。
calc()是干吗的?

calc()是单词calculate(测算)的缩写,是css3的1个新的长度企业作用,可使用简易的数学课运算。

嗯,CSS3愈来愈高級了。
运算标准

calc()应用通用性的数学课运算标准,可是也出示更智能化的作用:

    应用“+”“-”“*”“/”4则运算;
    可使用百分比、px、em、rem等企业;
    能够混和应用各种各样企业开展测算。

案例:

大家看来几个小事例来了解下calc()作用吧:

CSS Code拷贝內容到剪贴板
  1. .box{ border:1px solid #dddwidth:calc(100%-2px) }  

器皿宽度再加边框宽度恰好100%。

CSS Code拷贝內容到剪贴板
  1. .box{ width:calc(10em+20px) }  

宽度,10em加20px。

CSS Code拷贝內容到剪贴板
  1. .box{ margin-left:20pxwidth:calc(100%/3-20px); }    
  2. .box:nth-child(3n){ margin-left:0; }  

3栏等宽合理布局。
访问器适用

firefox 4.0+早已支出适用calc()作用,但是要应用-moz-calc()独享特性,chrome从19 dev版,也刚开始适用独享的-webkit-calc()写法,IE9这次则牛逼了1次,原生态适用规范的不带前缀的写法了。Opera貌似还不适用~~

因此假如大家要用这个特性的话,要记得带上各访问器的适配性。


eric meyer提到w3c标准的1条备注(评价里边的同学也是有提到):

    Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces. via CSS3 Values and Units specification

也便是说,”+”、”-“两个标记旁边务必要有时间格,而”*”、”/”标记则并不是务必的。

随后大家将会要这样写:

CSS Code拷贝內容到剪贴板
  1. width: calc(100%/3 - 2*1em - 2*1px);  

这样写也是能够的:

CSS Code拷贝內容到剪贴板
  1. width: calc(100% / 3 - 2 * 1em - 2 * 1px);  

可是这样写便是错的:

CSS Code拷贝內容到剪贴板
  1. width: calc(100%/3⑵*1em⑵*1px);  

嗯,这样很非常容易写错啊。还好如今适用的访问器还不太多,我会再次犹豫并维持升级~~