<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>九宫格</title></head><style>.squre{width: 600px;height:600px;border:2px dotted #0f0;color:#aaaaaa;font-size: 28px;font-weight: bold;}.circle{width: calc(100%/3 - 8px);-moz-width: calc(100%/3 - 8px);-webkit-width: 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
