CSS布局与网格

CSS Grid vs Flexbox vs Bootstrap

bootstrap在flexbox和grid之前。

CSS Grid

设置网格display，和网格个数与宽度间距

但是直接设置px的话不能适应不同的窗口大小。所以调整成百分比更合适

或者可以以fr为单位设置


同时也可以设置行宽，如果不设置的话默认为1fr。

把每一列都写出来实际太麻烦了，可以用repeat

这样是根据窗口的大小任意变换列数。

当小于200px 就只有一列

auto的作用是自动为内容缩小或者扩张
加了auto是这样的

如果不加的话，宽度不会适应变化

内容的对齐

单个网格的调节

单个网格的内容对齐

和整个内容的对齐类似

CSS搭建网页布局练习

Nav

首先把navigation的内容加在header里面。最后的Contact在右边所以单独加一个class

对列表进行样式设置。
主要的有，将nav设为弹性盒子。除去列表点，设置字体大小，并把边界设为0。
然后实际出来字都是挨在一起的，所以给他们设一个padding
最后去除a标签中下划线

成了这个样子

可以看见几个内容之间还有一些空白，并且是在一行之中的。
在zone里去除padding和margin,以及取消inline-block

因为nav是弹性盒子，其他的也相应对齐，但是边界还有空白

检查出来是body里面还有margin


然后要调整Contact的位置



新的问题是窗口缩小，文字会溢出
此刻将使用media query
设置当宽度小于600px时 nav需要作出以下修改

Cover

cover 这一块 设置一下新class container。并且也设为弹性盒子。因为cover内容居中所以，align-items 和justify-content都设置一下
cover的行高可以用viewport height,这样是占视图的比例

Project Grid + Footer

Project grid设置grid-wrapper的网格，用自动填充，当小于350px时，仅显示一个1fr。
网格之间间距为20px

box下面图片设置为百分百填满内容

每个box背景有一定margin，而图片也不是填满整个背景，所以有padding

footer本身就在最下面，主要是让其文字居中

美化整个网页

素材网站：https://undraw.co/illustrations

首先给cover添加一副图片，图片分类为cover

然后css之中
调整图片和cover区域的大小


第二，滚动的时候我们希望nav固定
加一个sticky分类

把位置固定 置顶 宽度100%

第三 给project grid中做一些动画效果

相当于鼠标移上去，每个盒子都会有倾斜效果