CSS实现随屏幕宽高适配的等分九宫格
方法一：
table实现（不推荐）
设置html,body,table宽高为100%；
缺点：如果td中的内容超出了，那么格子大小就会改变。
方法二：
flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.box>div {
width: calc(100%/3);
height: calc(100%/3);
border: 1px solid #aff;
box-sizing: border-box;
}
.box {
width: 100%;
height: 100%;
background-color: #ffa;
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
