*{
    padding: 0;
    margin: 0;
    border: 0;
}
/*取消默认样式*/

body{
    width: 100%;
    height: 100%;
}
/*根据浏览器大小适配*/

#container{
    position: relative;/*相对定位*/
    width: 620px;
    height: 450px;
    margin: 0 auto;/*设置居中*/
    margin-top: 100px;
    border-radius: 1px;/*圆角边框*/
}
/*包含所有内容的容器，不能太小，要能包含所有的元素*/

#gama{
    position: absolute;/*绝对定位*/
    width: 450px;
    height: 450px;/*游戏块大小*/
    border-radius: 5px;
    display: inline-block;/*设置行内块元素*/
    background-color: #ffe171;
    box-shadow: 0 0 10px #ffe171;/*设置阴影*/
}
/*游戏区div大小，取决于小方块大小，小方块为150*150，所以游戏区为150*3=450*/

#gama div{
    position: absolute;
    width: 149px;
    height: 149px;
    box-shadow: 1px 1px 2px #777;
    background-color: #20a6fa;
    color: white;
    text-align: center;
    font-size: 150px;
    line-height: 150px;
    cursor: pointer;/*pointer	光标呈现为指示链接的指针（一只手）*/
    -webkit-transition: 0.3s;/*浏览器前缀，兼容其他浏览器 chrome*/
    -moz-transition: 0.3s;/*firefox*/
    -ms-transition: 0.3s;/*ie*/
    -o-transition: 0.3s;/*opera*/
    transition: 0.3s;
}
/* 小方块的大小，定位为绝对定位，这样改变位置不会影响其他元素的位置。宽高都是149px。
注意，我们还设置了box-shadow:1px 1px 2px #777 ；它还有边框阴影，所以149px 加上边框1px，它的总宽度是150px
下面的transition：0.3s是设置过渡时间，css3的属性，它会让属性改变呈现过渡动画，我们改变方块的位置时，它会有一个动画,动画函数不需要自己编写*/

#gama div:hover{
    color: #ffe171;
}
/*给方块设置鼠标悬停动画，当鼠标悬停在元素上面时，会用这里的属性替换上面的属性，移开后又会变为原来的，这里是把字体颜色改变*/

#control{
    width: 150px;
    height: 450px;
    display: inline-block;
    float: right;
}
/*控制区，display:inline-block会让元素呈现块状元素的特性，使得可以改变大小，同时也会具有行内元素的特性，使得不会占据一行空间，
float:right让元素浮动到右边*/

#control rowspan{
    height: 25px;
    font-size: 20px;
    color: #222;
    margin-top: 10px;
}
/*设置控制区按钮的共同样式*/

#start{
    display: inline-block;
    font-size: 28px;
    width: 100px;
    height: 28px;
    background-color: #20a6fa;
    color: #ffe171;
    text-shadow: 1px 1px 2px #ffe171;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #4c98f5;
    text-align: center;
    cursor: pointer;
}
/*给start按钮设置属性。cursor:pointer属性让鼠标移到元素上面时会显示不同的鼠标形状，pointer是手型*/

#reset{
    display: inline-block;
    font-size: 28px;
    width: 100px;
    height: 28px;
    background-color: #20a6fa;
    color: #ffe171;
    text-shadow: 1px 1px 2px #ffe171;/*字体阴影*/
    border-radius: 5px;/*圆角属性*/
    box-shadow: 2px 2px 5px #4c98f5;/*盒子阴影*/
    text-align: center;/*文字居中*/
    cursor: pointer;
}
/*给Reset按钮设置属性*/

#d1{
    left: 0px;
}
#d2{
    left: 150px;
}
#d3{
    left: 300px;
}
#d4{
    top: 150px;
}
#d5{
    top: 150px;
    left: 150px;
}
#d6{
    top: 150px;
    left: 300px;
}
#d7{
    top: 300px;
}
#d8{
    left: 150px;
    top: 300px;
}
/*这是预先给每个小方块按照顺序排好位置*/