CSS中冷门却十分有用的calc()

x
用微信扫描二维码
分享至好友和朋友圈

  

  有没有想过 calc ()到底是什么? 往下面看下去你马上就会知道了!它可以用来在 CSS 中创建布局。 为此, 您也可以使用位置属性。

  Css calc ()用于样式表内部的计算。 函数允许使用数学表达式:

  1. addition (+)

  2. subtraction (-)

  3. multiplication (*)

  4. division (/)

  能够在 CSS 中做数学是一个非常有用的特性, 特别是在创建复杂的布局时。

  预处理器都具有使用数学函数的能力, 但是没有一个能够像 calc ()函数一样强大。 一些预处理器的能力包括在 SASS 和 LESS 中嵌套。

  使用 calc ()属性的主要优点是能够混合不同的单位。 例如, 你可以将百分比除以无单位数或从百分比中减去像素。

  语法

  

  需要注意的是, 操作符的两边都必须有空间。

  浏览器支持

  检查 CSS 属性是否被浏览器支持的最好方法是访问 CanIUse.com。 我们可以看到, calc ()函数有相当好的浏览器支持, 超过94% 。

  定位例子

  一个简单的例子来说明 calc ()函数的功能是在容器中定位 div。

  

  

  在这个例子中, 我们将看到 calc ()函数如何帮助我们定位子元素相对于父元素的位置。之后, 我们可以给元素一些样式和文本一些格式。

  宽度示例

  另一个很好的例子是如何使用 calc ()函数来设置元素的宽度。

  

  

  这样, calc ()函数被用来定义。 第二个子元素使用百分比和像素单位。 这很好地说明了该函数的单位混合能力。

  结论

  我们希望你从这篇文章中学到了一些新东西。 我们已经向您展示了 calc ()函数的基本知识, 现在是时候让你玩一玩了, 并释放它的全部潜能。

特别声明:本文为网易自媒体平台“网易号”作者上传并发布,仅代表该作者观点。网易仅提供信息发布平台。

跟贴 跟贴 1 参与 1
© 1997-2019 网易公司版权所有 About NetEase | 公司简介 | 联系方法 | 招聘信息 | 客户服务 | 隐私政策 | 广告服务 | 网站地图 | 意见反馈 | 不良信息举报

webstack前端栈

WEB前端技术分享

头像

webstack前端栈

WEB前端技术分享

56

篇文章

240

人关注

列表加载中...
请登录后再关注
x

用户登录

网易通行证/邮箱用户可以直接登录:
忘记密码