内容简介:CSS Grid经过这么多年的发展已经越来越受人青眯了,到目前为止支持率得到近88%的比例。经过这么多年的跟踪和学习,对CSS Grid的特性也是略有所知,但还未达到完全的融汇贯通。因为它有很多的特性,而且这些特性对于CSSer来说很多都是新的概念,比如我们今天要说的分数单位在CSS Grid中可以使用任何长度单位来给网格轨道定义大小。比如在在MDN是这样描述的:
CSS Grid经过这么多年的发展已经越来越受人青眯了,到目前为止支持率得到近88%的比例。经过这么多年的跟踪和学习,对CSS Grid的特性也是略有所知,但还未达到完全的融汇贯通。因为它有很多的特性,而且这些特性对于CSSer来说很多都是新的概念,比如我们今天要说的分数单位 fr
就是一个新东东。那么这篇文章,咱们就来一起看看这个特性有什么特性,给我们又能带来什么好处。感兴趣的同学,请继续往下阅读。
简介
在CSS Grid中可以使用任何长度单位来给网格轨道定义大小。比如在 grid-template-columns
或 grid-template-rows
可以使用 px
、 rem
、 vw
、 100%
等CSS单位来设置大小,除此之外,CSS网格还引入了另一个长度单位来帮助我们创建网格轨道大小。这个新单位就是我们今天要聊的 fr
单位。大家喜欢把它称为 分数单位 。那么他究竟有什么作用呢?
在MDN是这样描述的:
新的 fr
单位代表网格容器中可用空间的一等份。
就从这样的描述或许还是会令人感到困惑。不用担心,我们继续往下阅读,我想可以帮你解惑的。
对比性思考
fr
是代表网格容器中可用空间的一等份,即 1fr
。如果是 2fr
那么就是把容器剩余的空间分成两等份。看到这里,是否会想起Flexbox布局中的 flex
呢?比如我们有这样的一个示例:
<div class="flex"> <aside>Sidebar</aside> <main>Main</main> </div> .flex { width: 600px; background: orange; display: flex; min-height: 50vh; } aside { width: 200px; background: #f36; } main { margin-left: 20px; background: #f63; flex: 1; }
效果如下:
可以看出, main
元素设置 flex:1
时也占用了容器剩余的空间( 600px - 200px - 20px = 380px
)。从浏览器的查看器中可以验证,计算是无误的:
在上面的示例中,我们再来变更一下,再添加一个侧边栏:
main { flex: 2 } aside:last-of-type { flex: 1 }
使用浏览器再次验证我们的计算是不是正确的:
上图可以告诉我们答案,和我们最初想的是一样的。Flexbox中的 fle
以上所述就是小编给大家介绍的《CSS Grid带来的新单位:分数单位fr》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- C语言将真分数分解为埃及分数代码解析
- 分数的表示以及计算(c++)
- 百万考生分数如何排序:计数排序
- 百万考生分数如何排序:计数排序
- ElasticSearch 揭秘lucene的相关度分数算法
- Chrome 小恐龙游戏源码探究六 -- 记录游戏分数
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Rails 5敏捷开发
[美] Sam Ruby、[美] Dave Thomas、[美] David Heinemeier Hansson / 安道、叶炜、大疆Ruby技术团队 / 华中科技大学出版社 / 2017-12-30 / 115.00
本书以讲解“购书网站”案例为主线,逐步介绍Rails的内置功能。全书分为3部分,第一部分介绍Rails的安装、应用程序验证、Rails框架的体系结构,以及Ruby语言知识;第二部分用迭代方式构建应用程序,然后依据敏捷开发模式开展测试,最后用Capistrano完成部署;第三部分补充日常实用的开发知识。本书既有直观的示例,又有深入的分析,同时涵盖了Web开发各方面的知识,堪称一部内容全面而又深入浅出......一起来看看 《Rails 5敏捷开发》 这本书的介绍吧!