grid网格布局
语法：display: grid;
一、容器属性
1.设置网格分几列
语法： grid-template-columns:属性值；
eg: grid-template-columns:repaeat(3,lfr);等分；
eg： grid-template-columns:30px 80px auto;不等分；
2.设置网格分几行
语法：grid-template-rows:属性值；
eg： grid-template-rows: repeat(4,lfr);等分；
eg： grid-template-rows: 30% 100px auto;等分；
3.设置网格列间隔
语法：grid-column-gap:数值+单位；
4.设置网格行间隔
语法： grid-row-gap: 数值+单位；
5.grid-row-gap和grid-column-gap的简写方式
语法： grid-gap:数值+单位；
6.设置网格内容水平对齐方式
语法：justify-items：stretch/start/cent/end;
7.设置网格内容垂直对齐方式
语法：align-items: strech/start/center/end;
8.align-items和justify-items的简写方式
语法：place-items:center;
9.划分网格区域
语法：grid-template-areas:"a b b" "c c d" "e e d";
二、项目属性
1.指定子元素所属网格区域
语法：grid-area:a;
CSS3新增的css属性有哪些
transform/ transform-style /transform-origin;
transition animation perspective;
text-shadow box-shadow;
background-clip background-origin background-size
box-sizing
backface-visibility
flex布局中出现的所有css属性；
grid布局中出现的所有css属性；
常见的可以继承的css属性有哪些
字体 font-family font-size font-style font-weight
文本 text-align text-indent(内联不继承) color
line-height letter-spacing word-spacing
text-transform
列表
list-style-type list-style-image
list-style-position visibility
cursor
#使用border实现三角效果
语法：元素{ width:0; height:0; border:5px soild transparent; border-top-color:red; }
link和@import引入外部样式表的区别；
- link是html标签除了可以引入css文件外，还可以引入其他文件，@import属于css范畴，只能引入css文件；
- link引入的css文件和页面同时加载，@import引入的css文件页面加载完成后载入；
- link无任何兼容性问题，@import低版本浏览器不支持
- link是html标签，支持js控制dom改变样式，@import不支持(IE5以下)
接下来进入js=>
