一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

今天面试字节，一上来考了很多CSS题目，其中比较没有接触过的是“实现五点布局”，面试官解释了五点布局的具体要求：在页面的四个角有一个元素，并且在这个页面水平垂直居中的地方还有一个元素。 虽然很多人写了水平垂直居中的方案，但是五点布局在此基础上又进阶了一步，看了看掘金没有人写，我简单的记录一下我的想法。

方案一：使用fixed

demo

简单的来说就是四个角用position:fixed去设置，不同角就不同方向上设置即可。中间的元素也可以使用fixed,设置left和top（或者相反也行）为50%，因为定位相对的是元素的左上角，所以要再移动到元素的中心点，所以需要用transform等进行调整。

关于水平垂直居中的写法，可以参考这篇

#center {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方案二：使用flex

demo

我们为每一列创建一个flex容器，它的高度应该是calc(100vh / 3)即视口的1/3，这样三列就可以占满整个视口。

对于希望展现的元素，我们就简单的指定它的宽高，而中间的间隔就用一个flex:1的元素去占满（对于中间的一列就是两个间隔元素）。

然后再实现上面贴上面的边下面贴下面的边，这是用align-items这个属性实现的，具体的情况见下图：

最后实现的效果和前一种一样，就不上图了。

总结

其实我认为还可以用grid布局去实现，但是我有点无法实现grid布局中每列自动填充（即上面的flex:1这样的自动间隔）的部分不同（甚至是完全错开的），具体的实现方式我还会再研究研究。

这道题目其实也就是在水平垂直居中的基础上再加了一点点内容，实际上应该还是主要问水平垂直居中的方法。

今天面完反问部分我也问了面试官如何学好css，面试官回答还是应该多写，看到什么有意思的布局就去实现。我想了想我确实好久没有写过css了，都是用现成的组件布局，以后还是应该至少把常见的考点自己手动实现一遍，背是很单薄的。