仿写美团页面练习打卡Day2

  事先声明我不是三天打鱼两天晒网，主要最近真的很忙，并且还得知一个噩耗：暑假期间还要一周两次开组会，我导的名言多讲讲是对你好！额在此我表示谢谢不需要。本来以为快三年级可以开开心心的忙点自己的事情，没想到还是有什么多事情，真的是陀螺本螺了...打工人打工魂，周六休息一天又满血复活，立马滚来实验室学习。首先要纠正一下之前的错误，写着写着才发现这个首页在不同尺寸的显示屏下内容宽度是固定的，而我之前则是认为他外边距margin是固定的，这也就导致为什么后面对某些元素进行定位的时候有问题，具体可以看下面的图。我的方法是定义一个类，然后给需要居中显示的区域添加上这个类样式就可以。

首先还是对该部分进行划分区域，我就简单粗暴的分为两个区域，左边的分类列表展示区，和右边的图片展示区，当然还有其他的分块儿方法，大家随意。

1. 左边分类列表区

  不知道大家能不能看出来，其实这个区域是有点向上移了的，可以试一下不加样式的时候，整个内容是包含在灰色区域内部的，可以使用定位实现向上移动的效果，可以用绝对定位也可以用相对定位，我这里用的是相对定位，在给一个bottom值，相对于自己原来的位置向上移动一定的距离，好整体上移的效果实现就开始里面列表的展示。
  由于这些列表都是可以点击的，这里是通过ul和li标签，并在每个li标签内包裹一个a标签来实现点击效果，另外官方还给每个列表之前加了一个icon小图标，太麻烦了我没加。另外，整个分类列表是上下两端对齐的方式排列的，这里就要夸一夸flex布局的方便之处了。只需要三行代码就能搞定，而不需要给每个li标签添加固定的margin。

li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

需要明确的是弹性容器内部的弹性子元素默认是按行排列的，因此需要先改变内部子元素的排列方向，然后就是定义主轴上的排列方式了，space-between是实现两端对齐效果，center是实现居中效果，这个不可以混淆了。
  最后的小难点就是这个向右的小箭头的实现了。怕麻烦的可以直接插入箭头小图片然后调整，或者更投机取巧的直接用>代替也不是不可以，能表达是个箭头的意思就行。当然，也是可以用CSS来实现的，不怕麻烦的可以稍微记一下，主要思想就是先定义一个正方形div，然后只设置相邻两个边的边框就出现一个小直角的效果，最后在通过transform旋转一下就可以啦，最后上代码：

.right-row {
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #bfbfbf;
  border-right: 1px solid #bfbfbf;
  transform: rotate(-45deg);
}

以上就实现了一个向右的小箭头，当然可以调整transform的值，使小箭头向左向上向下，向任何一个方向都可以，可以根据自己的喜好进行调整。突然想起来上次面试被问到transform和translate，看来要去好好学习一下了。最后友情补充一个利用CSS实现三角形的方法，和上面的思想差不多，不过这时候不需要设置内容宽高了，直接给一个边框宽度就行，然后只给一条边框加颜色，另外三条边的颜色设置为透明即可，具体代码在下面：

.triangle {
  width: 0;
  height: 0;
  border-width: 5px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

总结别人面试经验的时候经常看到CSS被问到这个题目，大家还是尽量记住吧，其实明白它的原理之后发现并不难记的。好了，以上就已经将左边效果实现了，下面开始右边图片区域！

2. 右边图片区

  右边和左边类似，也是上移了一定距离的，并且注意到上面一排a链接部分和左边的全部分类标题高度是一致的，好像又意识到有点问题了...应该是将整个块上移的。然鹅现在不想去调整了，等有空在调看看吧，并且还要注意的是左边和右边都要加上浮动，否则块元素会默认换行展示，而浮动容易造成父级边框塌陷问题，但是这里在父级边框中已经给了足够高度所以没问题，大家可以在给父元素一个伪类清除浮动，确保万一。
  接下来介绍一下是如何实现a链接部分的。老方法，还是定位，但是用固定定位还是相对定位就需要考虑一下了，后来自己也想了好久，到底什么时候用固定定位什么时候用绝对定位，以我目前理解的就是如果是和自己原来的位置偏移不大时就可以用相对定位，比如上面的那个分类列表，只是上移了一点，那么用相对定位就很方便，但是如果偏移较大时，可以考虑用固定定位，并且给父级元素增加一个相对定位，否则就是相对于浏览器定位就乱套了。
  其次就是下面两行图片的展示，中间大图是轮播图，这个要多练练，默默拿小本本记下来这个安排！由于现在只是实现静态页面，就没考虑那么多，只是一个个将图片摆好就行，这个不难。最后值得一提的是最右边的登录框和二维码框，这里面也是使用的flex布局，类似于上面列表展示，不同的是这里是居中展示：

.image-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

  不得不说，flex布局是真相了，当然像这样简单的水平居中用margin: 0 auto;也是分分钟就能实现，但是我就是不用，哎就是玩儿！

总结

  以上差不多把中间区域实现了，算算接下来的板块应该快了，由于代码越写越长，这里就不粘上了（其实主要是我类名起的太长了...），每次加样式的时候最难的就是起类名，不然下次直接1-100起名字好了，简单粗暴。再多叨叨两句吧，之前学的框架是React，但是面试了一家吧说让我看看Vue，想着反正最佳前端好像学到瓶颈区了，就看看吧，哇不看不知道，一看是真相啊。双向式数据绑定是什么神仙发明，还记得之前学React的时候做过一个类似于计划表的小东西，想在组件之间传点数据真实难于上青天，父子之间还好，直接props就传过去了，特别是祖孙之间传数据真是难于上青天了。到了Vue这里，直接给input绑定一个v-model，直接双向绑定了，哪里还需要什么props一层一层传数据啊。
  叨叨完毕，继续学习去了，源码的话打算等整个页面在后面放上吧，还请大家多提建议，比如到底怎么起一个高端大气通俗易懂且短小的类名！！