发表于： 2017-03-28 22:38:01
4 694
花了4.5h 完成了任务1
这次任务遇到的坑以及解决方法：
坑1： 当格子排成3*3时，改变浏览器大小，格子的位置会打乱。
解决方法： 设置了min-width 和max-width(后来发现这样不对)
坑2：每个格子之间的间距不完全相同。
解决方法： 只设置了margin-top 以及 margin-right；
原理：对于浮动定位，如果同时设置margin-top和margin-bottom可能边距会叠加。
但是有些情况下，margin会发生重叠，重叠时，盒子之间的边距等于margin的较大值。
坑3：发现无法自适应（随着浏览器窗口大小变化而变化大小）
解决方法： 将width 和height设置成了30%（后来发现没必要设置height）
原理： 30%正好可以让一排只有3个格子。
坑4：将width 和height设置成了百分比后，格子不见了
解决方法：将padding-bottom改成了30%
原理：将padding-bottom改成了30%，content的高度就变成了0
后来发现这样子，就不用设置height了
其他发现：百分比是根据父元素的形状来确定的。父元素一般是body或者是上面一个div
可以完善的地方： 多了解F12的用处
能坚持完成以后的学习任务
返回列表
评论