5月底的时候加入了IT修真，做了任务一，虽然完成了没有自适应的小方块练习，但是花了相对于其他人时间比较长来思考如果下手。

因此深感到之前学习的不足，目前已经在家自学了20多天了，弥补了一些之前遗漏的css技术和知识点，最近几天才开始过来续弦。

之前的任务一的写法我目前还未成功做出自适应。在接下来学习过程中有时间我会继续研究究竟是哪里出了问题才导致不能自适应。

因此我参照了某位师兄/师姐的代码（啊，因为想不起来当时是复制了谁的代码下来学习思考了，多谢这位师姐/师兄！）

附上我对于代码的分析，供大家参考

（师兄/师姐）原代码：

HTML：

<div class="wrap">

    <div class="container">

        <div class="square"></div>

        <div class="square"></div>

        <div class="square"></div>

        <div class="square"></div>

        <div class="square"></div>

        <div class="square"></div>

        <div class="square"></div>

        <div class="square"></div>

        <div class="square"></div>

    </div>

</div>

CSS:

        .wrap {

            max-width: 400px;   

            //要限定一个最外面的盒子，不能让下面那个盒子无限大，并且这个宽度不能是固定的    

            margin: 0 auto;

        }

        .container {

            overflow: hidden;    

            //为了包住浮动的div    

    background:#aaa;

            width: 100%;         

           ‍‍ //自适应宽度     ‍‍

            padding-bottom: 1%;  

            //最底边的内边距要留有1%的宽，不然浮动的小盒子的高度就还会继续向下延展   

            border: 1px solid red;  

        }

        .square {

            float: left;

            width: 32%;   

            //32+32+32=96%   三个小盒子的横向宽度相加   

            margin: 1% 0 0 1%;  

            //上1，左1，96%+1%+1%+1%，最右边还留有一条1%大小的竖线，是因为浮动的小盒子是靠左的    

               所以剩下一条1%宽线，与前面的99%加起来刚好100%       

            padding: 16% 0;    

            //为了撑开高度而做的，小盒子上下内边距为16%，合起来为32%，与宽的数值一样    

            background-color: #e8830d;

            border-radius: 5%;

        }

在研究完师姐/师兄的代码以后，我自己编写了一个与这个几乎一样的代码，唯一不同的地方就是高度。

我在最外层盒子添加了max-width: 300px;   max-height: 300px;

中间的盒子添加了width: 100%;   height: 100%;

小盒子添加了width: 28%;   height: 28%;

但是浏览器生成的图像却是这样的。

原因应该是出在max-height上，因为我做了测试，去掉max,图形就出来了，但是自适应肯定是不成功的

我去网上搜索了max-height，很少有人使用它，我也并没有找到答案，因此我会继续探索答案找到以后再贴出来跟大家分享。

因此我想到了既然不能使用高度最大，那么我就使用高度，以及宽度/最大宽度的百分比来，写最外面的盒子的值，我设置的是 width:30%; height: 30%; 。

然后我要给html,body设置一个宽度和高度100%。

这次图像出来了，但是很悲催，因为我忽略了一件事情就是，浏览器本身的高度与宽度就不一致，当我设置最外面大盒子的宽高分别为浏览器的3/10的时候，可想而知因为宽比较长，高比较短，我的盒子是扁的。

并且他的宽和高，会随着浏览器单独调动宽高时变成不同的形状

最后我猜测可能师姐/师兄也跟我一样碰到这样的问题，因此才巧妙的使用了padding来撑起小盒子的高度，因为使用百分比进行计算的时候，margin,padding,width都是根据父元素的宽度进行计算的。这样就可以避免我上面碰到的两个问题。

附上我的代码，与师姐/师兄没有太大不同：

HTML:

  <div class="bigBox">

    <div class="middleBox">

 <div class="smallBox"></div>

 <div class="smallBox"></div>

 <div class="smallBox"></div>

 <div class="smallBox"></div>

 <div class="smallBox"></div>

 <div class="smallBox"></div>

 <div class="smallBox"></div>

 <div class="smallBox"></div>

 <div class="smallBox"></div>

    </div>

  </div>

CSS：

.bigBox{

max-width: 30%;

margin: 0 auto;

}

.middleBox{

width: 100%;

  padding-bottom: 4%;

overflow: auto;

background: #eee;

box-shadow: 0 0 5px #aaa;

}

.smallBox{

width: 28%;

float: left;

padding: 14% 0;

margin-top: 4%;

margin-left: 4%;

background: #e8830d;

border-radius: 5px;

}

然后根据古尘师姐给的方法进行了配置nginx

https://www.zhihu.com/question/41430703/answer/90941634

刚开始不知道为什么，在进行到localhost步骤的时候，网页什么都不显示。

我就只好去百度，忘记加上nginx关键词了，只写了local的关键词。

百度经验说要去安IIS，默默的去安好以后，输入localhost，显示了微软IIS的界面，我还很开心的以为做对了。

翻开古尘师姐给的下一步，啥？之前那个页面替换成要测试的页面，再次刷新就可以看见了。

这下懵了。。。又回去关了两次，重启，默默的试了一下localhost，这次那个成功打开nginx的页面出来了。

配置手机页面，啊也是翻了类似的错误，去配置了wampserver....后来又看到有人回答才绕了回来。

总结：

虽然期间犯了很多错误，但是后来都找到原因，改正了过来，也因此知道了一点点关于开启微软自带服务器IIS，WAMP的方法。

每次做过练习才能发现自己的不足，发现不足了以后花时间去了解去研究，才能进步。

我会继续努力的！！！