技术控

    今日:130| 主题:49332
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] CSS Grid布局:图解网格布局中术语之一

[复制链接]
相思劫 发表于 2016-10-1 08:45:06
223 13

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Grid布局 是2010由Microsoft提出的,最后提交的工作草案是2016年9月29日提交的。到目前为止, 浏览器对其支持度 还是一片顠红,但我们还是通过浏览器的设置可以看到相关的效果。比如Chrome浏览器中通过 chrome://flags/#enable-experimental-web-platformfeatures 打开Chrome浏览器实验网络平台功能。
   
CSS Grid布局:图解网格布局中术语之一-1 (Microsoft,浏览器,Chrome,chrome,图片)

   或者在你的项目中调用CSS Grid布局的 Polyfill 。作为学习和研究,这些足够了,但运用到实际的项目中,还是建议大家慎重。
  如果需要彻底的对CSS Grid布局有所了解,或者想更好的掌握它,那么必须先了解清楚其相关术语。因为CSS Grid布局中的术语较多,只有掌握了这些术语真正含义,后面才能更好的学习CSS Grid布局相关的特性。那么今天就来看看CSS Grid布局中的相关术语。
   特别声明:接下来文章中使用到的图片来源于 @Manuel Rego Casasnovas 写的《 Deep Dive into Grid Layout Placement 》一文。
  网格线(Grid lines)

   网格线 (Grid lines)可能是Grid布局规范中最重要的概念之一。网格线是用来在水平和垂直方向分割网格的线。水平方向的网格线是从左向右;垂直方向是从上往下。网格线的编号都是从 1 开始的。

CSS Grid布局:图解网格布局中术语之一-2 (Microsoft,浏览器,Chrome,chrome,图片)

   正如上图所示,我们使用一个 3 x 2 的网格来阐述它是怎么工作的。
友荐云推荐




上一篇:AOP 那点事儿
下一篇:Python and Zynq = PYNQ, which runs on Digilent’s new $229 pink PYNQ-Z1
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

ocdoa 发表于 2016-10-1 10:59:59
为了楼主,我拼了,楼下的抱紧大腿。。。
回复 支持 反对

使用道具 举报

csxcy 发表于 2016-10-1 11:33:50
路过...
回复 支持 反对

使用道具 举报

jeanb 发表于 2016-10-1 13:34:28
只吃楼主,撸过过经验,小伙伴们都惊呆了
回复 支持 反对

使用道具 举报

panwen888 发表于 2016-10-3 13:23:41
1v1飘过
回复 支持 反对

使用道具 举报

liluo1991 发表于 2016-10-22 14:04:54
时间是最好的老师,但遗憾的是――最后他把所有的学生都弄死了.
回复 支持 反对

使用道具 举报

冷霜 发表于 2016-11-5 17:28:51
无论是不是沙发都得回复下
回复 支持 反对

使用道具 举报

尔槐 发表于 2016-11-6 01:17:32
风萧萧兮易水寒,欠了钱兮你要还!
回复 支持 反对

使用道具 举报

我说了我爱你- 发表于 2016-11-8 05:18:24
回帖也有有水平的!
回复 支持 反对

使用道具 举报

sphqupgs 发表于 2016-11-10 07:28:52
相思劫在马路边丢了一分钱 !  
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表