Gird Layout代码解释
<div class="wrapper"> <!--定义一个类名为wrapper的div盒子-->
<div class="one">One</div> <!--定义一个类名为one的div盒子-->
<div class="two">Two</div> <!-- 定义一个类名为two的div盒子-->
<div class="three">Three</div><!--定义一个类名为three的div盒子-->
<div class="four">Four</div> <!--定义一个类名为four的div盒子-->
<div class="five">Five</div> <!--定义一个类名为five的div盒子-->
<div class="six">Six</div> <!-- 定义一个类名为six的div盒子-->
</div>
.wrapper { /*带有指定类(wrapper)的元素*/
display: grid; /*定义一个容器属性为网格布局*/
grid-template-columns: repeat(3, 1fr);/*利用空格分隔的值定义网格的列和行。
grid-template-columns和grid-template-rows属性来定义网格中的行和列。
这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。值的大小代表
轨道的大小,并且他们之间的空格表示网格线*/
grid-gap: 10px; /*定义垂直(水平)栏与垂直(水平)栏之间的间距*/
grid-auto-rows: minmax(100px, auto);/*用minmax()作为grid-auto-rows的值。自动创建的行高将会是
最小100px,最大为auto。 用auto意味着行的尺寸将会根据内容的大小来自动变换。*/
}
.one {
grid-column: 1 / 3;/*设置网格项目列方向的开始位置为1的网格线和结束为3的网格线*/
grid-row:; /*设置网格项目行方向的开始(结束)位置为1的网格线*/
}
.two {
grid-column: 2 / 4; /*设置网格项目列方向的开始位置为2的网格线和结束为4的网格线*/
grid-row: 1 / 3; /*设置网格项目行方向的开始位置为1的网格线和结束为3的网格线*/
}
.three {
grid-column:; /*设置网格项目列方向的开始(结束)位置为1的网格线*/
grid-row: 2 / 5; /*设置网格项目行方向的开始位置为2的网格线和结束为5的网格线*/
}
.four {
grid-column:; /*设置网格项目列方向的开始(结束)位置为3的网格线*/
grid-row:; /*设置网格项目行方向的开始(结束)位置为3的网格线*/
}
Gird Layout代码解释的更多相关文章
- css之grid layout代码解释
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr);/*grid-template-columns CSS属性定义了网格列的 ...
- Deep Learning入门视频(下)之关于《感受神经网络》两节中的代码解释
代码1如下: #深度学习入门课程之感受神经网络(上)代码解释: import numpy as np import matplotlib.pyplot as plt #matplotlib是一个库,p ...
- [ARM] Cortex-M Startup.s启动文件相关代码解释
1. 定义一个段名为CSTACK, 这里: NOROOT表示如何定义的段没有被关联,那么同意会被优化掉,如果不想被优化掉就使用ROOT. 后面的括号里数字表示如下: (1):这个段是2的1次方即2字节 ...
- word2vec代码解释
以前看的国外的一篇文章,用代码解释word2vec训练过程,觉得写的不错,转过来了 原文链接 http://nbviewer.jupyter.org/github/dolaameng/tutorial ...
- 关于CSS Grid Layout的代码解释
.wrapper { display: grid; /*生成grid类型块级网格*/ grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1 ...
- javascript代码解释执行过程
javascript是由浏览器解释执行的脚本语言,不同于java c,需要先编译后运行,javascript 由浏览器js解释器进行解释执行,总的过程分为两大块,预编译期和执行期 下面的几个demo解 ...
- 临时2级页表的初始化过程 head_32.S 相关代码解释
page_pde_offset = (__PAGE_OFFSET >> 20); /* __PAGE_OFFSET是0xc0000000,page_pde_offset = 3072 = ...
- 零基础学python之入门和列表数据(附详细的代码解释和执行结果截图)
Python学习笔记 1 快速入门 下载安装好Python之后,在开始找到 双击打开一个窗口,这是一个shell界面编辑窗口,点击左上角的file——new file新建一个窗口,这里可以输入完整的代 ...
- java 的一个hellow word 代码解释
/* This is a simple Java program. Call this file "Example.java". */(上面是注释的方法) class Exampl ...
随机推荐
- google 插件
鼠标手势 crxMouse Chrome™ Gestures Google翻译 json格式化 JSONView github展开文件夹 Octotree axure 原型 Axur ...
- JSP中out.print()、out.println()以及out.write()的区别
out是JSP九大内置对象之一,是JspWriter的一个对象,JspWriter继承了java.io.Writer类. out.print()和out.write() print()和println ...
- python之string模块常量:数字,26个字母,标点符号,空白
In [8]: import string In [9]: dir(string) In [10]: string.ascii_letters Out[10]: 'abcdefghijklmnopqr ...
- nginx 设置自签名证书以及设置网址http强制转https访问
自签名证书可以在自己的内网环境或者非对外环境使用,保证通信安装 1.生产证书 直接使用脚本生产: 中途会提示书如1次域名和4次密码,把一下文件保存为sh文件,赋予x权限后 直接执行,根据提示输入. # ...
- Mac mumu模拟器设置代理
adb devices adb connect 127.0.0.1:5555 adb shell am start -a android.intent.action.MAIN -n com.andro ...
- pycharm-professional-2017.1.1.exe专业版激活方法
pycharm 2017.1专业版破解码 1.在server选项里边输入 http://elporfirio.com:1017/就可以了. BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJ ...
- day5.python列表练习题
写代码,有如下列表,按照要求实现每一个功能 li = [“alex”, “WuSir”, “ritian”, “barry”, “wenzhou”] 1.计算列表的长度并输出 print(len(li ...
- FastJson 数组、List、Set、Map基本序列化与日期格式化
摘要: FastJson可以直接序列化数组.List.Set.Map等,也可以直接支持日期类型数据的格式化,包括java.util.Date.java.sql.Date.java.sql.Timest ...
- Codeforces 342D Xenia and Dominoes 状压dp
码就完事了. #include<bits/stdc++.h> #define LL long long #define fi first #define se second #define ...
- Codeforces 362D Fools and Foolproof Roads
Fools and Foolproof Roads 并查集瞎搞搞就行, 有点小坑点. #include<bits/stdc++.h> #define LL long long #defin ...