# CSS 尺寸单位
有一个1000px（宽）和800px（高）的视窗(Viewport)
vw——代表视窗(Viewport)的宽度为1%，在我们的例子里100vw = 1000px。
vh——窗口高度的百分比 100vh = 800px。
vmin——vmin的值是当前vw和vh中较小的值。所以100vim = 800px。
vmax——大尺寸的百分比。100vmax = 1000px。
# vmin、vmax 用处
做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
# vw、vh 与 % 百分比的区别
% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。
#
# 图像背景简写方式
background: [,color] image [,repeat] [,attachment] [,position]/[,size]
color: #000 -->背景颜色
image: url(/img.gif) -->背景图像
repeat: (repeat-x | repeat-y | no-repeat | inherit)
repeat-x: 水平重复
repeat-y: 垂直重复
no-repeat: 不重复(一张)
inherit: 遵从父级
attachment: (fixed | inherit)
fixed: 页面滚动时, 背景图片不滚动
inherit: 遵从父级
position: x y
关键字: (left | right | top | bottom | center)
size: width height
关键字: (cover | contain)
cover: 背景图像完全覆盖背景区域
contain: 宽度和高度完全适应内容区域
background-clip: (content-box | padding-box)
content-box: 内容区开始裁剪
padding-box: 内边距开始裁剪
background-origin: (content-box | padding-box)
content-box: 内容区开始绘制
padding-box: 内边距开始绘制
#
# 元素选择器
# 子元素选择器
通配符: *{margin:0}
元素选择: body{}
类选择: .list{}
id选择: #list{}
分组选择: .list,#wrap{}
后代选择: .list li{}
子元素选择: .warp>li{}
下排相邻兄弟选择: #wrap #first + .inner{}
下排所有兄弟选择: #wrap #first + .inner{}
# 属性选择器
div[name]{} // 含有name标签
--> <div name></div>
div[name="cm"]{} // 值为cm
--> <div name="cm"></div>
div[name~="cm"] // 值有完整的cm值
--> <div name="cm a"></div> | <div name="a cm"></div>
div[name^="cm"] // 值为cm开头
--> <div name="cmffff"></div>
div[name$="cm"] // 值为cm结尾
--> <div name="ffffcm"></div>
div[name*="cm"] // 值包含cm
--> <div name="ffcmff"></div>
# 伪类选择器
a:link{} // 未访问地址
a:visited{} // 已访问地址
// 跳转标签伪类选择器
:target{color: red}
<a href="#text">点击</a>
↓
<span id="text">文本</span>
color: red
# 动态伪类选择器
div:hover{} // 指标移到元素时
div:active{} // 鼠标点击元素,并未松开时
# 表单伪类选择器
input:enabled{} // 可编辑表单
input:disabled{} // 被禁用表单
input:checked{} // 被选中表单
input:focus{} // 获取焦点的表单
# 结构性伪类选择器
div:nth-child(n) {} // 第n个元素
div:nth-child(odd) // 奇数
div:nth-child(even) // 偶数
div:first-child {} // 第1个元素
div:last-child {} // 最后1个元素
div:not(:last-child) // 反向选择: 除了最后1个
# 标签内无内容选择器
div:empty{} // 标签内无内容,标签时
# 伪元素选择器
// before,after:伪元素可设置尺寸, 元素样式, 定位按照被插入的元素
// 可以利用伪元素做css界面应用
div::before{content:'内容'} // 标签头部伪元素
div::after{content:'内容'} // 标签尾部伪元素
伪元素的 content 属性，通过 attr(xxx)，可以读取到对应 DOM 元素标签名为 xxx 的属性的值。
<div count="5">Message</div>
div {
position: relative;
width: 200px;
height: 64px;
}
div::before {
content: attr(count);
...
}
# 字体选择器
div::first-line{} // 首行文本
div::first-letter{} // 首字母文本
div::selection{} // 字体选中时
# CSS 概念
# 选择器特殊性
// 特殊性字数 越后,越大 特性性越高
// 特殊性为0 比所有特殊性都大
#test {} // 特殊性为0100
.pink.pink.pink{} // 特殊性:0030
<div style=""></div> // 特殊性:0000
# 属性重要声明
background: red!important; // 该属性不可被覆盖
# 属性继承
*{color:darkcyan}
div{} // color:darkcyan
# 字体图标
# 使用流程
<!-- 第一步: 引入字体图标css文件 -->
<link rel="stylesheet" href="font/iconfont.css">
<!-- 第二部: 添加默认样式 -->
<style>i {font-family:"iconfont"; font-style: normal;}</style>
<!-- 第三部: 使用标签 -->
<i class="icon-windows" />
# 字体图标制作流程
# 透明度&阴影&模糊
// opacity: 元素透明度 rgba: 样式透明度
opacity: (0~1) && rgba(0,0,0,(0~1))
// 字体阴影
text-shadow: rgba(0,0,0,.5) 10px 10px 10px;
text-shadow: 颜色 x轴偏移 y轴偏移 模糊半径 ,[下一个阴影];
// 盒模型阴影
box-shadow: rgba(0,0,0,.5) 10px 10px 10px;
box-shadow: 颜色 x轴偏移 y轴偏移 模糊半径 ,[下一个阴影];
// 背景模糊
filter: blur(50px);
#
# 字体样式
# 浮雕字体
h1{color: #fff;text-shadow: black 1px 1px 10px;}
# 文字模糊特效
h1{transition: 1s;color: rgb(0,0,0,0);text-shadow: black 1px 1px 30px;}
h1:hover{text-shadow: black 1px 1px 1px;}
# 描边字体
-webkit-text-stroke: 4px pink; // 渲染为描边文字
# 其他字体样式
unicode-bidi:bidi-override; // 103 --> 301
# 盒模型背景字体裁剪(背景字体)
div{
background-image: url(tg.png); // 设置背景图
-webkit-background-clip: text; // 由字体内容裁剪背景图片
color: rgba(0,0,0,.2); // 字体透明度
}
# 盒模型样式
white-space: nowrap; // 盒模型字体超出不换号
overflow: hidden; // 溢出不显示
text-overflow:ellipsis; // 盒模型字体溢出显示...
box-sizing: border-box; // 边框不在占据元素外宽度
border-radius: 15px; // 圆角 50%为圆
// 盒模型倒影
-webkit-box-reflect:below 0 linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0));
-webkit-box-reflect: 倒影方向 倒影距离 透明度线性
// 盒模型字体分栏
column-count: 4 // 字体分栏4行
column-gap: 14px; //每栏的间距为14px
column-rule: solid 1px red; // 每栏中间线样式
#
# 色彩渐变
# 线性
@from = rgba(0,0,0,0); // 开始:透明
@go = rgba(201,45,45) // 中途:红色
@end = rgba(0,0,0,.5) // 最后:灰
// 上往下渐变(默认)
background-image: linear-gradient(@to,@end);
// 右/左渐变
background-image: linear-gradient(left right, @to,@end);
background-image: linear-gradient(to left, @to,@go,@end);
// 度数旋转渐变
background-image: linear-gradient(-45deg,@to,@go,@end);
// 设置颜色区间占比多少像素
background-image: linear-gradient(@to 10%,@go 80%,@end 10%);
// 当渐变区间未占满时, 会重复渐变
background-image: linear-gradient(@to 10%, @end 10%);
# 径向
@from = yellow; // 开始:黄色
@go = rgba(201,45,45) // 中途:红色
@end = green // 最后:绿色
// 宽高自适应(椭圆)
background-image: radial-gradient(@from 30%, @end 70%) // 开始的圆为30%, 结束的圆为70%
// 圆(默认以最远的边算半径)
background-image: radial-gradient(circle, @from 30%, @end 70%)
// 设置圆中心
background-image: radial-gradient(circle at 0px 0px,@from 30%, @end 70%)
// 以最近的边算半径
background-image: radial-gradient(closest-side circle, @from 30%, @end 70%)
# 时间过渡特效
transition: ([,property] duration timing-function [,delay]);
transition: (过渡属性 过渡时间 时间曲线 延迟启动过渡)
transition-property: width | height | ......
transition-duration: 1s | 2s | 0.4s
transition-timing-function:
linear // 相同速度
ease // 慢速->快速->慢速
ease-in // 慢速->同速
ease-out // 同速->慢速
ease-in-out // 慢速->同速->慢速
cubic-bezier(n,n,n,n) // 贝塞尔曲线
transition-delay: 1s | 2s | 0.4s
#
# transform变形
**注意要点：**transform百分比参数按照盒模型
# 2D变形
# 旋转
transform: rotate(180deg); // 平移旋转
transform: rotateY(180deg); // X 轴旋转
transform: rotateX(180deg); // Y 轴旋转
# 平移
transform: translateX(20px) // X 轴偏移
transform: translateY(20px) // Y 轴偏移
transform: translate(300px,300px) // X,Y轴偏移
# 倾斜
transform: skewX(-45deg) // X轴倾斜
transform: skewY(-45deg) // Y轴倾斜
transform: skew(-45deg) // X轴倾斜
transform: skew(-45deg,45deg) // X,Y轴倾斜
# 缩放
transform: scaleX(.5) // X轴缩放一半
transform: scaleY(.5) // Y轴缩放一半
transform: scale(.5) // X,Y轴缩放一半
# 3D变形
# 旋转(rotate3d)
// 笛卡尔坐标 on ℝ3
transform: rotateZ(160deg) // Z轴旋转
rotate3d(0,0,1,180deg) // 三轴旋转函数
rotate3d(X轴矢量,Y轴矢量,Z轴矢量,旋转角度)
# 平移(translate3d)
transform: translateZ(100px); // Z轴往前平移100px
transform: translate3d(100px,100px,100px); // X,Y,Z平移100px
# 缩放(scaleZ)
transform:scaleZ(2) translateZ(100px); // --> Z轴前进200px
# 变形基点
改变变形依据的基点
transform-origin: 0% 100%
关键字：left right top bottom
0% 100%
1px 100px
####### ###
# 营造舞台效果
# 景深(perspective)
**注意要点：**景深可以被子元素的景深进行叠加
perspective: 300px; // 盒模型Z轴空间为300px
perspective-origin: center; // 景深基点为中心(默认)
perspective-origin: left top; // 景深基点为右下角(视觉)
perspective-origin: right bottom; // 景深基点为左下角(视觉)
# 3D舞台(preserve-3d)
父级元素设置了 preserve-3d , 则赋予了元素层次, Z轴靠前的会覆盖Z轴靠后的元素
transform-style: preserve-3d; // 赋予元素层次
# anim 动画
animation: name duration [,timing-function] [,delay] [,iteration-count] [,direction];
animation: 名称 动画时间 时间曲线 开始延迟 播放次数 反向播放
timing-function:
linear // 相同速度
ease // 慢速->快速->慢速
ease-in // 慢速->同速
ease-out // 同速->慢速
ease-in-out // 慢速->同速->慢速
cubic-bezier(n,n,n,n) // 贝塞尔曲线
animation-iteration-count:
n // 播放n次
infinite // 播放无数次
animation-direction:
normal // 默认, 正常播放
alternate // 反向播放
@keyframes [name]
{
from {background: red;}
to {background: yellow;}
}
#
# CSS 函数
# attr （选择元素属性值）
// 以下实例在每个链接后面插入内容：
a:after {
content: " (" attr(href) ")";
}
# calc（动态计算尺寸）
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
- 需要注意的是，运算符前后都需要保留一个空格，例如：
width: calc(100% - 10px)； - 任何长度值都可以使用calc()函数进行计算；
- calc()函数支持 "+", "-", "*", "/" 运算；
- calc()函数使用标准的数学运算优先级规则；
# cubic-bezier（定义贝塞尔）
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
- 贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。
# hsl（色相、饱和度、亮度来定义颜色）
#p1 {background-color:hsl(120,100%,50%);} /* 绿色 */
#p2 {background-color:hsl(120,100%,75%);} /* 浅绿 */
#p3 {background-color:hsl(120,100%,25%);} /* 暗绿 */
#p4 {background-color:hsl(120,60%,70%);} /* 柔和的绿色 */
- **色相（H）**是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
- **饱和度（S）**是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
- 亮度（L），取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
# linear-gradient（线性渐变）
/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);
/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
# radial-gradient（径向渐变）
#grad {
background-image: radial-gradient(red, green, blue);
}
# var（变量定义与使用）
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
# 媒体查询
@media screen and (min-width:60px) , (min-height:60)
@media [设备关键字] [条件关键字] (条件1) [条件关键字] (条件2){ a{/*样式内容*/} }
设备关键字:all | screen | print | speech
all: 所有设备
screen: 彩色屏幕
print: 手持设备
speech: “听觉”类似的媒体设备
条件关键字:all | , | not
and: JS中的&&
,: JS中的||
not: JS中的! (取反)
条件:
width: 根元素宽度 (可加max(width<) min(width>) 前缀)
height: 根元素宽度 (可加max(height<) min(height>) 前缀)
device-width: 设备宽度 (可加max(device-width<) min(device-width>) 前缀)
-webkit-device-pixel-ratio: 设备像素比
orienttation: 横屏/竖屏 (竖屏:portrait, 横屏:landscape)
#
# flex 容器
**注意要点：**设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
display: flex; // 设置为flex容器
display: inline-flex; // 设置为行内flex容器
# 容器项目排序(flex-direction)
flex-direction: column-reverse | column | row | row-reverse;
column-reverse: Y轴排序, 起点在底部
column: Y轴排序, 起点为头部
row: X轴排序, 起点为左侧
row-reverse: X轴排序, 起点为右侧
# 容器项目换行排序(flex-wrap)
flex-wrap: wrap | nowrap | wrap-reverse;
wrap: 换行
nowrap: 不换行(默认)
wrap-reverse: 换行(从下往上)
# 容器项目对齐方式(justify-content)
justify-content: flex-start | flex-end | center | space-around | space-between;
flex-start: 左端排序(默认)
flex-end: 右端排序
center: 中间排序
space-around: 项目间隔相等
space-between: 两端对齐, 项目间隔相等
# 容器项目交叉轴(排序方向)对齐方式(align-items)
align-items: flex-start | flex-end | center | baseline | stretch
flex-start: 交叉轴起点对齐
flex-end: 交叉轴终点对齐
center: 交叉轴中心对齐
baseline: 项目第一行文字基线对齐
stretch: 如果项目未设置高宽或设为auto 将沾满父级flex元素高度 (默认)
# 容器项目多轴线对齐方式(align-content)
align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex-start: 交叉轴起点对齐
flex-end: 交叉轴终点对齐
center: 交叉轴中心对齐
space-around: 轴线间隔相等
space-between: 与交叉轴两端对齐, 轴线间隔相等
stretch: 轴线占满整个交叉轴
####### ###
# 项目排列顺序(order)
order: <number>
# 单项目放大/缩小比例(flex-grow)
// 默认是不放大也不缩小, 宽度按照项目宽度撑开
flex: <number>
# 单项目不被挤压
flex-shrink: 0;
# 单项目对齐方式(align-self)
// 该属性可能取6个值，除了auto，其他都与align-items属性完全一致
align-self: auto | flex-start | flex-end | center | baseline | stretch
# Grid 容器
display: grid // 设置为grid容器
display: inline-grid // 设置为行内grid容器
**注意要点：**设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
# Grid 定义划分行与列
容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
.container {
display: grid;
/* 定义列数, 与列宽 */
grid-template-columns: 100px 100px 100px;
/* 定义行数, 与行高 */
grid-template-rows: 100px 100px 100px;
}
上面代码 (opens new window)指定了一个三行三列的网格，列宽和行高都是100px。
除了使用绝对单位，也可以使用百分比。
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
}
grid-template-columns属性对于网页布局非常有用。两栏式布局只需要一行代码。
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
}
# 函数 repeat 简化操作
有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下。
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
repeat()重复某种模式也是可以的。
grid-template-columns: repeat(2, 100px 20px 80px);
上面代码 (opens new window)定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px。
# 函数关键字 auto-fill 自动填充容器
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
上面代码 (opens new window)表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。
# 关键字 fr 定义项目片段
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
上面代码 (opens new window)表示两个相同宽度的列。
fr可以与绝对长度的单位结合使用，这时会非常方便。
.container {
display: grid;
grid-template-columns: 150px 1fr 2fr;
}
上面代码 (opens new window)表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。
# 函数 minmax 定义长度范围
minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr。
# 关键字 auto 让浏览器决定长度
auto关键字表示由浏览器自己决定长度。
grid-template-columns: 100px auto 100px;
# 定义项目的间距
grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。
.container {
grid-row-gap: 20px;
grid-column-gap: 20px;
}
上面代码 (opens new window)中，grid-row-gap用于设置行间距，grid-column-gap用于设置列间距。
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，语法如下。
grid-gap: <grid-row-gap> <grid-column-gap>;
因此，上面一段 CSS 代码等同于下面的代码。
.container {
grid-gap: 20px 20px;
}
如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。
# 定义项目的排序
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图数字的顺序。
grid-auto-flow: column;
上面代码 (opens new window)设置了column以后，放置顺序就变成了下图。
grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。
下面的例子 (opens new window)让1号项目和2号项目各占据两个单元格，然后在默认的grid-auto-flow: row情况下，会产生下面这样的布局。
上图中，1号项目后面的位置是空的，这是因为3号项目默认跟着2号项目，所以会排在2号项目后面。
现在修改设置，设为row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。
grid-auto-flow: row dense;
上面代码 (opens new window)的效果如下。
上图会先填满第一行，再填满第二行，所以3号项目就会紧跟在1号项目的后面。8号项目和9号项目就会排到第四行。
如果将设置改为column dense，表示"先列后行"，并且尽量填满空格。
grid-auto-flow: column dense;
上面代码 (opens new window)的效果如下。
上图会先填满第一列，再填满第2列，所以3号项目在第一列，4号项目在第二列。8号项目和9号项目被挤到了第四列。
# 定义项目内容的排序
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
这两个属性的写法完全相同，都可以取下面这些值。
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）。
.container {
justify-items: start;
}
上面代码 (opens new window)表示，单元格的内容左对齐，效果如下图。
.container {
align-items: start;
}
上面代码 (opens new window)表示，单元格的内容头部对齐，效果如下图。
place-items属性是align-items属性和justify-items属性的合并简写形式。
place-items: <align-items> <justify-items>;
下面是一个例子。
place-items: start end;
如果省略第二个值，则浏览器认为与第一个值相等。
# 定义项目整体的排序
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
这两个属性的写法完全相同，都可以取下面这些值。（下面的图都以justify-content属性为例，align-content属性的图完全一样，只是将水平方向改成垂直方向。）
这两个属性的写法完全相同，都可以取下面这些值。（下面的图都以justify-content属性为例，align-content属性的图完全一样，只是将水平方向改成垂直方向。）
- start - 对齐容器的起始边框。
- end - 对齐容器的结束边框。
- center - 容器内部居中。
- stretch - 项目大小没有指定时，拉伸占据整个网格容器。
- space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
- space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
- space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
place-content属性是align-content属性和justify-content属性的合并简写形式。
place-content: <align-content> <justify-content>
下面是一个例子。
place-content: space-around space-evenly;
如果省略第二个值，浏览器就会假定第二个值等于第一个值。
# 定义多余项目的大小
有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。
grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据 template，决定新增网格的列宽和行高。
# 定义单项目位于哪根网格线
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
grid-column-start属性：左边框所在的垂直网格线grid-column-end属性：右边框所在的垂直网格线grid-row-start属性：上边框所在的水平网格线grid-row-end属性：下边框所在的水平网格线
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
上面代码 (opens new window)指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。
上图中，只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。
除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。可以把这个属性的值分别改成column、row dense和column dense，看看其他项目的位置发生了怎样的变化。
下面的例子 (opens new window)是指定四个边框位置的效果。
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
.item-1 {
grid-column-start: span 2;
}
上面代码 (opens new window)表示，1号项目的左边框距离右边框跨越2个网格。
这与下面的代码 (opens new window)效果完全一样。
.item-1 {
grid-column-end: span 2;
}
使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。
grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
.item {
grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;
}
下面是一个例子。
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
上面代码中，项目item-1占据第一行，从第一根列线到第三根列线。
这两个属性之中，也可以使用span关键字，表示跨越多少个网格。
.item-1 {
background: #b03532;
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
background: #b03532;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
上面代码 (opens new window)中，项目item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列。
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
下面是一个例子 (opens new window)。
.item-1 {
grid-area: 1 / 1 / 3 / 3;
}
# 定义单项目内容的排序
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
这两个属性都可以取下面四个值。
- start：对齐单元格的起始边缘。
- end：对齐单元格的结束边缘。
- center：单元格内部居中。
- stretch：拉伸，占满单元格的整个宽度（默认值）。
下面是justify-self: start的例子。
.item-1 {
justify-self: start;
}
place-self属性是align-self属性和justify-self属性的合并简写形式。
下面是一个例子。
place-self: center center;
如果省略第二个值，place-self属性会认为这两个值相等。
# CSS 规范(W3C标准)
https://www.w3.org/Style/CSS/ https://www.w3.org/Style/CSS/current-work