今天完成的事情

• # flex布局知识盲点补全,gird布局的进阶认识;

• # 首页页面细节优化;

明天计划的事情

• #  提交任务,介绍css阶段的任务学习;

遇到的问题

• 问题一:如何使圆形box中的数字垂直居中;

• 
• 面对这个场景我首先想到的是弹性布局,因为弹性布局我运用的很频繁,屡试不爽;
• div {

  display: flex;

  justify-content: center;

  align-content: center;

  width: .80rem;

  height: .80rem;

  border-radius: .40rem;

  box-shadow: 0 0 5px #999999;

  }
• 
  
• 然而始终达不到我想要的效果;中间的数字实现来了水平居中,而无法实现垂直居中;
• 
• 在查找了教程之后,一度还是没有找到原因,脑海中一直想不通之前都用的好好的,这次怎么就不行了呢?
• 在出去散步后回来,发现了原因:
• align-content属性失效的原因压根就是定义上的问题,这条属性的应用场景仅限于多根轴线:
• 
• 
  
• 此处正确的用法应该是这个:
• 
• 
  
• ##内心os : (lll￢ω￢)知道真相的我眼泪掉下来,原来我一直都没深入搞明白,模棱两可的照着编辑器的提示和自动补全敲代码......
• 
  
• 
  
• ##总结 : 弹性布局中一直被我忽略的几个属性:
• 
  
• 容器属性:以下6个属性设置在容器上。

  • flex-direction:  //决定主轴的方向（即项目的排列方向）。
  • flex-wrap:  //定义如果一条轴线排不下，如何换行。
  • flex-flow:  //flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
  • justify-content:  //定义了项目在主轴上的对齐方式。
  • align-items:  //定义项目在交叉轴上如何对齐。
  • align-content:  //定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

• 
  
• 项目属性:以下6个属性设置在项目上。

• • order:  //定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  • flex-grow:  //定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  • flex-shrink:  //定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  • flex-basis:  //定义了在分配多余空间之前，项目占据的主轴空间（main size）。
  • flex:  //flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
  • align-self:  //允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

• • 
    

收获

#  网格布局也和弹性布局类似,分为容器属性和项目属性;

## 网格容器(Grid Container) 属性

• display-grid:  //将元素定义为网格容器，并为其内容建立新的 网格格式上下文
• 
  
• grid-template-columns/grid-template-rows: //定义网格的列/行
• 
  
• grid-template-areas  //指定的 网格区域(Grid Area) 名称来定义网格模板
• 
  
• grid-template : //用于定义grid-template-rows ，grid-template-columns ，grid-template-areas 缩写 (shorthand) 属性。
• 
  
• grid-column-gap/grid-row-gap/grid-gap: 
• //指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。
• 
  
• justify-items : //沿着 行轴线(row axis) 对齐 网格项(grid items) 内的内容
• 
  
• align-items : //沿着 列轴线(column axis) 对齐 网格项(grid items) 内的内容
• 
  
• justify-content:  //如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，在这种情况下，您可以设置网格容器内的网格的对齐方式。 此属性沿着 行轴线(row axis) 对齐网格
• 
  
• align-content:  //使用场景同上,此属性沿着 列轴线(column axis) 对齐网格
• 
  
• grid-auto-columns/grid-auto-rows:  
• //指定任何自动生成的网格轨道(grid tracks)（又名隐式网格轨道）的大小。
• 
  
• grid-auto-flow:  
• //如果你有一些没有明确放置在网格上的网格项(grid items)，自动放置算法 会自动放置这些网格项。该属性控制自动布局算法如何工作。
• 
  
• grid:  //在一个声明中设置所有以下属性的简写： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 。它还将grid-column-gap 和 grid-column-gap设置为初始值，即使它们不可以通过grid属性显式地设置。
  

## 网格项(Grid Items) 属性

• grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column:
• //通过指定 网格线(grid lines) 来确定网格内 网格项(grid item) 的位置。 grid-column-start / grid-row-start 是网格项目开始的网格线，grid-column-end / grid-row-end 是网格项结束的网格线。
• 
  
• grid-row/grid-column :  //分别为 grid-column-start + grid-column-end 和 grid-row-start + grid-row-end 的缩写形式。
• 
  
• grid-area:  //为网格项提供一个名称，以便可以 被使用网格容器 grid-template-areas 属性创建的模板进行引用。 另外，这个属性可以用作grid-row-start + grid-column-start + grid-row-end + grid-column-end 的缩写。
• 
  
• justify-self:  //沿着 行轴线(row axis) 对齐 网格项 内的内容（ 相反的属性是 align-self ，沿着列轴线(column axis)对齐）。此值适用于单个网格项内的内容。
• 
  
• align-self:  //沿着 列轴线(column axis) 对齐 网格项 内的内容（ 相反的属性是 justify-self ，沿着 行轴线(row axis) 对齐）。此值适用于单个网格项内的内容。

#网格布局与弹性布局的区别: