1. 关于flex布局的总结
display: inline-flex;
display: flex;
容器属性:6种
1. flex-direction: row | row-reverse | column | column-reverse;
2. flex-wrap: nowrap | wrap | wrap-reverse;
3. flex-flow: <flex-direction> || <flex-wrap>;
4. justify-content: flex-start | flex-end | center | space-between | space-around;
5. align-items: flex-start | flex-end | center | baseline | stretch;
6. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
项目属性:6种
1. order: <integer>;
2. flex-grow: <number>; /* default 0 */
3. flex-shrink: <number>; /* default 1 */
4. flex-basis: <length> | auto; /* default auto */
5. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
6. align-self: auto | flex-start | flex-end | center | baseline | stretch;
2. 关于Grid布局的总结
1.容器和项目
1.1 行、列和单元格
1.2 网格线
A. 容器属性
2 容器属性
2.1 display属性
2.2 display:inline-grid效果
3 grid-template-columns 和 grid-template-rows
3.1 repeat
3.2 auto-fill
3.3 fr
3.4 minmax
3.5 auto关键字
4 grid-row-gap和grid-colunm-gap属性
4.1 grid-row-gap:设置行与行之间的间隔
4.2 grid-colunm-gap:设置列于列之间的间隔
注:grid-row-gap和grid-colunms-gap合并简写的话,格式为grid-gap
5 grid-auto-flow
6
6.1 justify-items、align-items 、place-items 和 place-item属性
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: <align-items> <justify-items>
6.2 justify-content属性、align-content属性和place-content属性
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly
7 justify-content、align-content和place-content
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
B.项目属性
1. grid-colunm-start属性
2. grid-colunm-end属性
3. grid-row-start属性
4. grid-row-end属性
注:Grid与flex布局的区别
- 弹性布局(flex):是轴线布局(一维布局)
- 网格布局(grid):是将容器划分成行和列,产生单元格,然后指定项目所在的单元格(二维布局)
3. 轮播图纯css写法
HTML:
<div class="container">
<div class="photo">
<img src="1.gif" alt="">
<img src="2.gif" alt="">
<img src="3.jpg" alt="">
</div>
</div>
CSS:
.container {
width: 300px;
height: 400px;
overflow: hidden;
}
.photo{
width: 900px;
animation: switch 5s ease-out forwards; /*forward停在最后一张*/
/*infinite轮播*/
}
.img {
float: left;
width: 300px;
height: 400px;
}
@keyframes switch {
0%,
35% {
margin-left: 0;
}
35%,
70% {
margin-left: -300px;
}
75%,
100% {
margin-left: -600px;
}
}
}