calc

使用calc()创建CSS网格

网格系统对于Web前端人员来说不是一个陌生的话题了,在w3cplus上介绍网格系统的教程并不少,不过这些网格系统都有其类似之处。在HTML中为了能应用好网格,都需要添加一些类名,而在样式中,不管你用了几列网格,都有一大串的样式代码。这让一个有代码洁癖的人员来说,总觉得不爽。幸好,CSS预处理器的出现,如Sass。可以让你的代码变得更简单一些,但和以前的网格也极其类似。有时试想,有没有更好的呢?今天看到Create a CSS grid using calc()觉得很有意思,通过calc()和Sass的结合,生成需要的网格。希望此篇文章对大家有所启发。

calc()制作自适应布局   

CSS中自适应布局是一种常见的布局方式,但当浏览器视窗缩小一定程度的时候,内容会挤跨,特别是侧边栏。CSS3中新增加了一个calc()特性,可以让浏览器根据表达式自动计算,真正达到自适应的布局效果。

CSS3的calc()使用

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