今天做的事情:  

                     1. 申请了域名, 已经解析,但没搞明白主机怎么绑定域名.

                     2. 配置了SVN(其实是昨天配 的)

                     3. 九宫格任务-CSS部分重新写了一遍.

明天做的事情:

                     1. 域名绑定确认一下

                     2. css任务-桌游精灵

                     3. 如果完成了CSS的桌游精灵,那么就进行 js任务2-桌游精灵( 但, 需要先完成)

遇到的问题:

1.       获得自适应的正方形

获得正方形的方块,我的思路是设定百分比的宽,然后想办法让宽和长相当.

我是用一个容器div去套3个小方块div,一共3个容器,9个小方块(　实际上，只要用一个div套这9个方块就行了. 用3个div是想便于设定高度,然而没啥用.)

然后把容器div的width设成50%(body的50%宽度), 小方块div的widht设成30%(容器div宽度的30%,相当于body宽度的50%*30%= 15%)

容器div的高度, 我设成了16.7%.

但body的默认高度=0,所以这样是无效的.

所以我把容器div的高度改成html(窗口)高度的16.7%

那么问题又开了, html的高度与宽度是不一致的, 也就是说我没法把容器div弄成一个长宽3:1的长方形, 最终小方块div没法变成1:1的正方形.

所以问题转变成:如何获得一个长宽１：１，而且自适应大小的正方形．

最终用padding的特性解决了这个问题

给方块设置了width :30% ,然后用padding-top:30%.

为何 padding 30%能撑开正方形

在A元素只有width的时候,A是一条没有高度的线. 如果设定了padding 30%, 那么说明A的子元素(如果有的话)距离A上边距的距离是30%*A.parentNode.width.   所以需要为A元素撑开一个30%*A.parentNode.width的高度.

总感觉这个逻辑挺神奇的, 正常的思路是先有height, 才有padding. 如果高度为0的元素定义padding, 而且padding > 0,那应该报个错啥的. 然而CSS里直接就修改了这个高度, 来符合padding的需求....

2.       获得小一点的正方形

看了一下官方的答案, 直接来了9个小方块div, 设置了float(所以父元素变成了body) ,然后width: 30%;

这样的话,方块很大,  9个方块占据整个屏幕,不好看.

那么如何把正方形弄小点呢？所以我把容器的width设成了50%

这样小方块元素就没那么大了.

但, 执行的结果, 是第一行有6个方块.

原因是容器div的width是50%,而且是float, 所以第一行装了2个容器元素,6个方块.

把容器div的width设成51%,就解决了这问题.

另一个方法,是取消容器div以及小方块div的float属性, 给小方块div添加了display:inline-block属性.  这样就可以随意设定容器div的width了.

当然,最终, 我发现,其实只要设置一个容器div就行了, 不需要3个的.还是走了弯路.

3.       使用display:inline-block时,缩小到一定程度会错位.

       这个的原因,是因为inline-block的元素,之间有4px的空隙,如果缩小的话,会因为空间不够,被挤到下一层.

4.       给小正方形加内容

因为是用padding-top撑开了小正方形div, 所以如果在小正方形div里输入内容,那么内容也会占据一定高度. 就会导致小正方形div的高度变化,变形.

所以小正方形里不能添加文字等内容. 只能添加新的元素,新元素通过absolute与小正方形来定位, 然后在新元素里写字.