CSS面试题】实现一个在页面中垂直居中的正方形中有四个上下左右间距相等的小正方形

最新推荐文章于 2023-06-04 22:15:25 发布

置顶 Yunluo_orz

最新推荐文章于 2023-06-04 22:15:25 发布

阅读量1.1k

点赞数 2

分类专栏： web前端 css布局 grid 文章标签： css css3 面试

本文链接：https://blog.csdn.net/qq_37820129/article/details/107508177

版权

web前端同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

css布局

1 篇文章 0 订阅

订阅专栏

grid

1 篇文章 0 订阅

订阅专栏

面试题目：

编写css，实现一个前端样式：在一个大正方形内有四个相等的小正方形。要求大正方形上下左右居中，每一个小正方形上下左右距离相等。

实现效果图

使用grid布局分割，然后划出来四块之后再使其中的四个div垂直居中。我以为这样已经实现了需求，但是后来发现是上下左右距离相等，这样的四个红色的方块彼此之间的距离是到边框距离的二倍。
在这里插入图片描述

代码

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css面试题</title>
</head>
<style>
  .fdiv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  div.fdiv>div {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  div.fdiv>div>div {
    width: 100px;
    height: 100px;
    background-color: red;
  }

</style>

<body>
  <div class="fdiv2" style="width: 600px;height: 600px;border: 1px solid #000;">
    <div>
      <div>1</div>
    </div>
    <div>
      <div>2</div>
    </div>
    <div>
      <div>3</div>
    </div>
    <div>
      <div>4</div>
    </div>
  </div>
</body>

</html>

新的实现方案

考虑了之后，我发现答案应该是个5*5的方格，实现效果图是这样的。
使用grid布局把这个拆成五等分，每个间距都是1等分。实现了需求在这里插入图片描述
代码如下：

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css面试题</title>
</head>
<style>
  .fdiv {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  div.fdiv>div {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  div.show {
    background-color: red;
  }
</style>

<body>
  <div class="fdiv" style="width: 600px;height: 600px;border: 1px solid #000;">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

    <div>1</div>
    <div class="show">2</div>
    <div>3</div>
    <div class="show">4</div>
    <div>5</div>

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

    <div>1</div>
    <div class="show">2</div>
    <div>3</div>
    <div class="show">4</div>
    <div>5</div>

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

  </div>
</body>

</html>

总结

最近使用了grid和flex布局，对css实现复杂布局真的感叹良多，下意识觉得这是在考这两种布局方式。
结果万万没想到居然只是简单的表格布局。有点略不甘心，写了一大堆div，代码不够美观。而且感觉使用grid布局这样实现，就像拿个打炮打了蚊子，但是感觉蚊子又不是那么简单。

结尾

仔细阅读了一遍文档之后，不想写那么多div想让代码美观。有了最后一个满意点的实现代码；

最终版效果图

和之前一样实现的效果没有问题，代码使用了grid-template-areas属性，之前用过很多次这个属性来实现复杂的css布局框架，到了简单的地方就忘了用。
在这里插入图片描述

最终代码

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .fdiv {
    display: grid;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    grid-template-areas:
    '. . . . .'
    '. a . b .'
    '. . . . .'
    '. c . d .'
    '. . . . .';
  }

  div.fdiv>div {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
  }
</style>

<body>
  <div class="fdiv" style="width: 600px;height: 600px;border: 1px solid #000;">
    <div style="grid-area:a;"></div>
    <div style="grid-area:b;"></div>
    <div style="grid-area:c;"></div>
    <div style="grid-area:d;"></div>
  </div>
</body>

</html>

Yunluo_orz

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS面试题】实现一个在页面中垂直居中的正方形中有四个上下左右间距相等的小正方形

面试题目：编写css，实现一个前端样式：在一个大正方形内有四个相等的小正方形。要求大正方形上下左右居中，每一个小正方形上下左右距离相等。实现效果图使用grid布局分割，然后划出来四块之后再使其中的四个div垂直居中。我以为这样已经实现了需求，但是后来发现是上下左右距离相等，这样的四个红色的方块彼此之间的距离是到边框距离的二倍。代码<html lang="en"><head> <meta charset="UTF-8"> <meta name
复制链接

扫一扫

专栏目录