令人匪夷所思的怪异布局

xianxin_
960 阅读2分钟

起因

今天想聊一聊令人匪夷所思的怪异布局，这些布局或许在实际工作中用不到，但会出现在面试手写题中。前不久，在招行面试过程中，被问到这样一个手写的布局问题：

请实现一个如下图的布局 layout.png

Tip: 要求内容部分是水平垂直居中于网页，box1、box2和box3之间的缝隙宽度相同

实现

最开始的时候，确实没有想到很好的思路，工作中用这种布局的情况很少。接下来实现这种布局：

准备容器

首先，需要准备一个 index.html 文件，用来编写我们布局。

<!-- 布局容器 -->
<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

编写样式

编写样式的时候，打算用Grid布局来实现，如果有对Grid布局不是很了解的，可以看看这篇学懂grid布局：这篇就够了(译)文章。

第一步 编写基本样式

  html,body{
    width: 100%;
    height: 100%;
    margin:0;
  }
  
  .container{
    width: 410px;
    height: 410px;
   }
  
  .box1{
    background-color: skyblue;
   }
   
  .box2{
    background-color: pink;
   }
  
  .box3{
    background-color: purple;
   }

第二步 让容器垂直居中

  html,body{
    width: 100%;
    height: 100%;
    margin:0;
  }
  
  .container{
    width: 410px;
    height: 410px;
    
    /* 定义本身的位置为 垂直居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
   }
  
  .box1{
    background-color: skyblue;
   }
   
  .box2{
    background-color: pink;
   }
  
  .box3{
    background-color: purple;
   }

第三步 划分容器

  html,body{
    width: 100%;
    height: 100%;
    margin:0;
  }
  
  .container{
    width: 410px;
    height: 410px;
    
    /* 定义本身的位置为 垂直居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 定义子元素 */
    display: grid;
    /* 定义网格的宽度及高度 */
    grid-template-rows: 200px 200px;
    grid-template-columns: 200px 200px;
    /* 网格间留点空隙 */
    grid-gap: 10px;
    
   }
  
  .box1{
    background-color: skyblue;
   }
   
  .box2{
    background-color: pink;
   }
  
  .box3{
    background-color: purple;
   }

第四步 处理首个子元素居中的问题

  html,body{
    width: 100%;
    height: 100%;
    margin:0;
  }
  
  .container{
    width: 410px;
    height: 410px;
    
    /* 定义本身的位置为 垂直居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 定义子元素 */
    display: grid;
    /* 定义网格的宽度及高度 */
    grid-template-rows: 200px 200px;
    grid-template-columns: 200px 200px;
    /* 网格间留点空隙 */
    grid-gap: 10px;
    
   }
  
  .box1{
    background-color: skyblue;
   }
   
  .box2{
    background-color: pink;
    /* 重写首个网格的宽度及高度 */
    width: 200px;
    height: 200px;
    /* 这句很关键，让当前网格（.box1)本身居中 */
    justify-self: center;
    /* 合并同一行的所有网格->保证同一行只有一个网格 */
    grid-column-start: 1;
    grid-column-end: 3;
   }
  
  .box3{
    background-color: purple;
   }

实现效果

i.png

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>怪异的布局</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin:0;
        }

        .container {
            width: 410px;
            height: 410px;

            /* 定义本身的位置为 垂直居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            /* 定义子元素 */
            display: grid;
            /* 定义网格的宽度及高度 */
            grid-template-rows: 200px 200px;
            grid-template-columns: 200px 200px;
            /* 网格间留点空隙 */
            grid-gap: 10px;

        }

        .box1 {
            background-color: skyblue;
            /* 重写首个网格的宽度及高度 */
            width: 200px;
            height: 200px;
            /* 这句很关键，让当前网格（.box1)本身居中 */
            justify-self: center;
            /* 合并同一行的所有网格->保证同一行只有一个网格 */
            grid-column-start: 1;
            grid-column-end: 3;
        }

        .box2 {
            background-color: pink;
        }

        .box3 {
            background-color: purple;
        }
    </style>
</head>

<body>
    <!-- 布局容器 -->
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

感兴趣的朋友可以去试试~

工具箱

一款用于运行本地 HTML 文件的VSCode插件:
Live server
一款用于编辑图形在线画图工具:
excalidraw

avatar
文章
阅读
粉丝