九宫格——用html+css制作一个网页

自用（仅供参考，如有错误欢迎指出）

要求：

1.通过html和css制作一个可以根据页面缩放进行变化的九宫格。

2.并且可以通过手机浏览器访问。

过程：

1.网页制作

先不管通过网页访问这一项，先写一个本地的网页。

首先要把九宫格的形状做出来。九宫格就像魔方的一个面，所以我先做一个大的div，然后把它分成三个行，然后每个行再分成三个小块。

于是我在body中先写了这样一个结构:

<div>
     <div>

     div>

     <div>

     div>

     <div>
                
     div>
div>

假设每个小正方形的边长为50px，颜色为橙色（#ff7700）。
先不设置排列方式，将每一行分为三个小正方形。

        <div>
            <div>
                <div class="little-square">div>
                <div class="little-square">div>
                <div class="little-square">div>
            div>
            <div>
                <div class="little-square">div>
                <div class="little-square">div>
                <div class="little-square">div>
            div>
            <div>
                <div class="little-square">div>
                <div class="little-square">div>
                <div class="little-square">div>
            div>
        div>

有点粗暴，也还没有设置边距，所以他现在是一个长条状，他们粘在了一起：

给小方块的class加上外边距属性：

下面要改变一下小方块的排列方式，行和行是竖直排列，每一行中的小方块是水平排列，所以创建row类，并添加到每一行之上。

.row{
    display:flex;
 }

刷新后可以看到呈如下排列，已经大概符合形状了。

设置小正方形的样式使其美观。

        .little-square {
            margin: 6px;
            background-color: #ff7700;
            width: 50px;
            height: 50px;
            border-radius: 15%;
        }

最终小正方形变成下图样式。

有时候会不小心把百分比搞错，颜色有可能看不到，无法判断出现了什么情况。所以我在小方格里面添加了数字，这样就能够保证色块不见了的时候我也可以判断出当前的排列情况，便于修改。

查阅资料后，我得知，完成自适应不能够把各个值写死。也就是不能给他们一个具体值，例如：把小方块的边长设置为50px。

        .row {
            width:50%;
            margin-left:auto;
            margin-right:auto;
            display: flex;
        }

        .little-square {
            padding-bottom:30%;
            margin-left:1.5%;
            margin-bottom:1.5%;
            position:relative;
            background-color: #ff7700;
            width:30%;
            height:0;
            border-radius: 15%;
        }

插曲：

        .test{
            width:50px;
            height:50px;
            background-color: rgb(231, 35, 35);
        }

建一个属性为如上所述的div，则会出现一个正方形。
如果把width删除掉，则会出现一个条。

如果把height删除掉，则什么都没有

但是在这种情况下，我在div里面添加了数字1，会出现1占据的那一小块。

这一小块就只有这么宽，输入多个1，甚至是超出范围的1，红色区域都不会变化，因为width是有固定值的。