CSS的grid网格布局中有哪些基础定义要了解
Admin 2022-07-30 群英技术资讯 252 次浏览
1、grid布局又称为网格布局,可以实现二维布局方式。
2、这是使用CSS控制的,不是使用HTML控制的,同时还可以依赖于媒体查询根据不同的上下文得新定义布局。
网格线(Grid Lines)
网格线组成了网格,他是网格的水平和垂直的分界线。一个网格线存在行或列的两侧。我们可以引用它的数目或者定义的网格线名称。
网格轨道(Grid Track)
网格轨道是就是相邻两条网格线之间的空间,就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小,用来控制宽度或高度。
网格单元格(Grid Cell)
网格单元格是指四条网格线之间的空间。所以它是最小的单位,就像表格中的单元格。
网格区域(Grid Area)
网格区域是由任意四条网格线组成的空间,所以他可能包含一个或多个单元格。相当于表格中的合并单元格之后的区域。
本文教程操作环境:windows7系统、css3版,DELL G3电脑。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了AmazeUI 点击元素显示全屏的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
本文章就单独讲一下关于css教程div横向居中写法的用法,并且在ie,ie7,firefox兼容问题。横向居中(centering)这是一个简单的技巧,但是值得再说一遍,因为我看见太多的新手问题都是问这个:css如何横向居中?您需要定义元素的宽,并且定义横向的margin,假如您的布局包含在一个层(容器)中,您可以这样定义使它横向居中:#wra ...
我们遇到加载,要么是UI框架中自带,要么就是百度,然后CV到项目中?但是,自己实现的时候,又会没有思路。下面本篇文章就来给大家分享10个纯 CSS 实现的 Loading 效果,希望对大家有所帮助!
这篇文章主要介绍了CSS设置背景模糊的实现方法,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的动画。下面通过本文给大家介绍CSS3使用transition属性实现过渡效果,需要的朋友参考下本文
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008