CSS Grid布局(2)

6.间距

grid-column-gap和grid-row-gap属性用来创建列与列,行与行之间的间距

这里写图片描述

间距(Gap)可以设置任何非负值,长度值可以是px、%、em等单位值

这里写图片描述

grid-gap是grid-row-gap和grid-column-gap两个属性的缩写

如果它指定了两个值,那么第一个值是设置grid-row-gap的值,第二个值设置grid-column-gap的值

这里写图片描述

如果只设置了一个值,表示行和列的间距相等,也就是说grid-row-gap和grid-column-gap的值都相同

7.通过网格线号码来定位网格项目

网格线实际上是代表线的开始、结束,两条线之间就是网格列或行

每条线是从网格轨道开始,网格的网格线从1开始,每条网格线逐步增加1

这里写图片描述

两列三行的网格创建三条列网格线和四条行网格线。item1就是由行和列的号码重新定位

如果一个网格项目跨度只有一行或一列,那么grid-row-end和grid-column-end不是必需的

这里写图片描述

这里写图片描述

grid-row是grid-row-start和grid-row-end的简写。grid-column是grid-column-start和grid-column-end的简写

如果只提供一个值,他指定了grid-row-start和grid-column-start的值

如果提供两个值,第一个值是grid-row-start、grid-column-start的值,第二个值是grid-row-end、grid-column-end的值,两者之间必须要用/隔开

这里写图片描述

这里写图片描述

如果指定四个值,第一个值对应grid-row-start,第二个值对应grid-column-start,第三个值对应grid-row-end和第四个值对应grid-column-end

这里写图片描述

8.网格项目跨行或跨列

默认情况下网格项目跨度只有一个列和行,但可以跨越多个行和列

这里写图片描述

可以通过设置grid-column-end和grid-column-start距离多个网络线号实现多个列跨越

这里写图片描述

这里写图片描述

同样的可以通过grid-row-end和grid-row-start距离多个网格号实现多个行跨越

这里写图片描述

这里写图片描述

通过简写的grid-row和grid-column也能实现多行或多列的跨越

这里写图片描述

这里写图片描述

关键词span后面紧随数字,表示合并多少个列或行

这里写图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407225.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React开发(124):ant design学习指南之form中的属性isFieldTouched

没有值的时候返回提示的error 有值返回undefined

HDU 4990 Ordered Subsequence --数据结构优化DP

题意&#xff1a;给一串数字&#xff0c;问长度为m的严格上升子序列有多少个 解法&#xff1a;首先可以离散化为10000以内&#xff0c;再进行dp&#xff0c;令dp[i][j]为以第i个元素结尾的长度为j的上升子序列的个数&#xff0c; 则有dp[i][j] SUM(dp[k][j-1]) (a[k] < a[…

CSS Grid布局(3)

10.网格线命名 通过grid-template-rows和grid-template-columns定义网格时&#xff0c;网格线可以被命名。网格线名称也可以设置网格项目位置 grid-template-rows和grid-template-columns定义你的网格&#xff0c;将名称分配给网格线 定义网格线名称时需要避免使用规范中出现…

VS 2010 OpenGL 配置与实例开发

首先参考了网上的安装配置环境部分&#xff1a;http://blog.csdn.net/Ididcan/article/details/4490797 最近准备学习OpenGL,结果发现敲入书中给的代码&#xff0c;居然提示头文件找不到&#xff0c;相当郁闷&#xff0c;查了一下才发现有些不是VC自带的&#xff0c;需要自己下…

NODE属性说明

注&#xff1a;文本节点、元素节点或者注释节点等都是Node类型的子类&#xff0c;它们继承自Node类&#xff0c;所以这里的node可以是任何一种节点类型 1.node.nodeType用来以数字值返回指定节点node的节点类型 2.node.nodeName用来返回指定节点的节点名称 如果节点是元素节点…

HTML DOM之标签操作方法

1.document.getElementById(id)方法可返回对拥有指定 ID 的第一个对象的引用 2.document.getElementsByName(name)方法可返回带有指定名称的对象的集合 3.document.getElementsByTagName(tagname)方法可返回带有指定标签名的对象的集合。如果把特殊字符串 “*” 传递给 getEle…

Vue中动态(import 、require)显示img图片

vue中&#xff0c;经常会遇到显示图片的问题&#xff0c; 如果是一个普通组件的话&#xff0c;那么这样就可以了 <img src"../assets/images/avtor.jpg" width"100%"> 上文的弊端有两个&#xff1a; 首先&#xff0c;是采用绝对路径引入。如果以…

案例精解企业级网络构建

早就听说51CTO博客出书了,但由于放假在家,没有来得及购买.现在开学了,天天上51CTO网站,博客出书的广告打的到处都是,嘿嘿!~~想不关注都不行啊!看了各位博友对这本书的好评,终于禁不住诱惑,也在网上购买了一本.今天终于收到书了.打开包装,书真的很精美.自己非常喜欢,我是一名专科…

Oracle 中 for update 和 for update nowait 的区别

原文出处http://bijian1013.iteye.com/blog/1895412 一.for update 和 for update nowait 的区别 首先一点&#xff0c;如果只是select 的话&#xff0c;Oracle是不会加任何锁的&#xff0c;也就是Oracle对 select 读到的数据不会有任何限制&#xff0c;虽然这时候有可能另外一…

HTML DOM之节点操作方法(1)

1.checkboxObject.focus()方法用于为 checkbox 赋予焦点 2.checkboxObject.blur()方法用于让 checkbox 失去焦点 3.appendChild()在子节点列表之后插入新增的子节点 注&#xff1a;您也可以使用 appendChild()方法将一个元素移动到另一个元素中 这里就将”myList2”中最后一个…

HTML DOM之节点操作方法(2)

9.document.hasFocus()方法返回布尔值&#xff0c;用于检测文档(或文档内的任一元素)是否获取焦点。没有参数 10.node.hasChildNodes()方法返回 true&#xff0c;如果指定节点拥有子节点&#xff0c;否则返回 false。没有参数 11.node.isDefaultNamespace(namespaceURI)方法返回…

(转载)Android两种Tab分页的方式:TabActivity和ActivityGroup以及Android项目几种常见的应用架构...

在Android里面Tab分页&#xff0c;常用的方法有两种&#xff1a; 一、TabActivity和TabHost的结合 1.主类继承TabActivity public class Tagpage extends TabActivity 2.获取当前TabHost对象 final TabHost tabHost getTabHost(); 3.添加Tab分页标签,这里就是关键&#xff0c;…

CSS3之Transition

css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发&#xff0c;并圆滑地以动画效果改变CSS的属性值 1.语法&#xff1a;transition: property duration timing-function delay; 参数1&#xff1…