<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九宫格</title>
</head>
<style>
.squre{
600px;
height:600px;
border:2px dotted #0f0;
color:#aaaaaa;
font-size: 28px;
font-weight: bold;
}
.circle{
calc(100%/3 - 8px);
-moz- calc(100%/3 - 8px);
-webkit- calc(100%/3 - 8px);
height: calc(100%/3 - 8px);
-moz-height: calc(100%/3 - 8px);
-webkit-height: calc(100%/3 - 8px);
line-height: calc(600px/3 - 8px);
-moz-line-height: calc(600px/3 - 8px);
-webkit-line-height: calc(600px/3 - 8px);
text-align:center;
border-radius: 50%;
margin:0 calc(8px*3/2) calc(8px*3/2) 0;
-moz-margin:0 calc(8px*3/2) calc(8px*3/2) 0;
-webkit-margin:0 calc(8px*3/2) calc(8px*3/2) 0;
float:left;
background:rgba(0,0,0,0.1);
}
.circle:nth-child(3n){
margin-right:0;
}
</style>
<body>
<div class="squre">
<div class="circle">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
<div class="circle">5</div>
<div class="circle">6</div>
<div class="circle">7</div>
<div class="circle">8</div>
<div class="circle">9</div>
</div>
</body>
</html>
九宫格效果图：
在绘制过程中主要用到的是css中的calc()，下面针对calc()做一下简单介绍：
calc()
1.支持%、rem、em、px等单位的四则运算
2.“+”、“-”运算注意要留有空格
3.“*”、“/”运算可以不留空格
兼容性处理:
-moz-calc(expression) 兼容firefox
-webkit-calc(expression) 兼容chrome/safari