CSS Grid布局(3)

10.网格线命名

通过grid-template-rows和grid-template-columns定义网格时,网格线可以被命名。网格线名称也可以设置网格项目位置

这里写图片描述

grid-template-rows和grid-template-columns定义你的网格,将名称分配给网格线

定义网格线名称时需要避免使用规范中出现的关键词,以免导致混乱

分配网格线名称必须用方括号[网格线名称],然后后面紧跟网格轨道的尺寸值

这里写图片描述

这里写图片描述

可以在方括号中添加多个名称来命名网格线名称,使用多外名称命名网格线名称时,名称间要用空格隔开

每一个网格线的名称可以用来定位网格项目的位置

这里写图片描述

11.通过网格线名称设置网格项目位置

使用网格线名称设置网格项目位置和使用网格线号码设置网格项目位置类似

这里写图片描述

引用网格线名称的时候不应该带方括号

这里写图片描述

这里写图片描述

grid-row和grid-column简写属性也适用于网格线名称,也可以用来设置网格项目的位置

这里写图片描述

12.使用相同的名称命名网格线和设置网格项目位置

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

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

相关文章

main.js中的Vue.config.productionTip = false

开发模式:npm run dev是前端自己开发用的 生产模式:npm run build 打包之后给后端放在服务端上用的 Vue.config.productionTip false 1 上面这行代码的意思 是阻止显示生产模式的消息。 如果没有这行代码,或者设置为true,控制台就…

VS 2010 OpenGL 配置与实例开发

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

《COM原理与应用》学习笔记二——COM对象和COM接口的实现

COM对象是给用户提供服务的封装的实体。这个应该和C中类的对象理解起来是相似的。但是有时候也把COM对象当作提供服务的那个类。COM对象也对数据进行了封装,然后也提供了接口。不过和类还是有一些不一样的。类中的数据可以申明为public,然后让用户能够直…

禁止ipc$默认共享的方法

以下四种方法可以参考一下: A、一种办法是把ipc$和默认共享都删除了。但重起后还会有。这就需要改注册表。 1,先把已有的删除 net share ipc$ /del net share admin$ /del net share c$ /del …………(有几个删几个) 2,禁止建立空…

NODE属性说明

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

使用临时文件mkstemp和输出errno对应的错误描述信息strerror

/* <<高级Linux编程.pdf>> page24-25: temp_file.cmkstemp: 从一个文件名模板(结尾是&#xff1a;XXXXXX)生成临时文件名&#xff0c;创建这个临时文件&#xff0c;将模式设置为仅当前用户可以访问&#xff0c;并且以读写权限打开这个文件。mkstemp函数用其他字符替…

微信h5网页关闭分享以及关闭当前页面

关闭网页分享一些按钮 document.addEventListener("WeixinJSBridgeReady", function () {WeixinJSBridge.call(hideOptionMenu); });关闭网页 WeixinJSBridge.call(closeWindow);

Linux Shell脚本中点号和source命令

Linux中一个文件是根据其是否具有执行属性来判断他是否可以直接运行的。就像Windows下的exe一样。如果我们要执行某一个文件&#xff0c;可以先将其权限修改为可执行(必须是所有者或者root才能修改)。然后&#xff0c;通过用sh来执行该脚本或者./脚本名。 但有时候我们并不想修…

[转载]使用命名管道实现进程间通信

使用命名管道实现进程间通信 来源 : VChelp 4.5 进程间通信 在Win32下提供的进程间通信方式有以下几种&#xff1a; 剪贴板Clipboard&#xff1a;在16位时代常使用的方式&#xff0c;CWnd类中提供了支持。 COM/DCOM&#xff1a;通过COM系统的代理存根方式进行进程间数据交换&…

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”中最后一个…

常用端口号

端口号标识了一个主机上进行通信的不同的应用程序。 1.HTTP协议代理服务器常用端口号&#xff1a;80/8080/3128/8081/90982.SOCKS代理协议服务器常用端口号&#xff1a;10803.FTP&#xff08;文件传输&#xff09;协议代理服务器常用端口号&#xff1a;214.Telnet&#xff08;…

关于停止发表“每周新闻回顾”的通知

各位朋友&#xff1a;从2007年春节之后&#xff0c;老杨就基本上坚持每周整理当周重大IT新闻&#xff0c;如此坚持了一年。之后&#xff0c;由51CTO编辑部各位编辑轮流进行这项工作&#xff0c;算来已经超过一年半了。承蒙各位读者厚爱&#xff0c;如今新闻回顾已经成为51CTO.c…

单词统计程序

一个简单的单词统计程序&#xff0c; 问题来源: http://topic.csdn.net/u/20111114/10/2e439bbf-04c5-4042-9905-ece0bf008b97.html /* 功能&#xff1a;实现单词统计功能 */#include <stdio.h> #include <string.h>main() {char *t[20]; // 声明一个指针数组&a…