如题，写在回答里，请指正
马克加索尔
先馬克，後續再理解
/* 文字大小、行高、字体 */ font: 24px/30px bold 'microsoft yahei';
font简写中至少包含size和family，且放在最后，顺序不可变。其他的属性顺序随意、可添可不添，
font: bold 24px/30px 'microsoft yahei';
原文里before和after前都是一个“：”，你这2个冒号有什么区别么？还是2个冒号兼容性好一点？
33.3*3=99.9 剩下的0.1 怎么办
补充一条
/* 设置根元素的高度为100%，外边距为0，占据整个浏览器窗口 */
/* 为天使开辟一块天地，天使想要飞起来，是需要空间的，而默认的根元素的高度是0，没有空间天使是飞不起来的，*/
html, body { height: 100%; margin: 0; }同时用了正常的解释和老师的天使爆裂理论
.page {
/* 包裹层div .page 脱离文档流，悬浮起来，准备扩张。第一个天使飞天，准备爆裂 */
position: absolute;
/* 设置包裹层div的扩张范围，此处意思是设置为全屏范围。大招全开，天使全屏爆裂 */
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.list {
/* 每个格子都左浮动 */
float: left;
/* 每个格子的宽高 */
height: 33.3%;
width: 33.3%;
/* 将.list::before 中设置的遮罩层和 .list::after 中设置的内容层的扩张范围，限制为，仅限于.list 这个div中 */
position: relative;
}
.list::before {
/* 在每个格子前设置一个内容为空的元素，这里就是每个格子的遮罩层，用来覆盖每一个格子，此为第二个天使*/
content: '';
/* 遮罩层脱离文档流，悬浮起来，准备扩张。第二个天使飞天，准备爆裂 */
position: absolute;
/* 遮罩层的扩张范围，不再是填满容器了，而是距离格子所在的容器 div .list 上下左右各10px*/
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
/* 圆角边框 */
border-radius: 10px;
/* 背景色 */
background-color: #cad5eb;
}
.list::after {
/* 在每个格子后设置一个内容为 attr(data-index) 的元素，这个是格子的内容层，用来显示 div 属性中 data-index 的值。此为第三个天使 */
content: attr(data-index);
/* 格子的内容层悬浮起来，准备扩张。第三个天使飞天，准备爆裂 */
position: absolute;
/* 内容层的高度 */
height: 30px;
/* 内容层的扩张范围，填满格子所在的容器 div .list */
left: 0;
right: 0;
top: 0;
bottom: 0;
/* 配合 height: 30px 和 font: 24px/30px bold; 内容层的高度等于文字行高，实现文字垂直居中 */
margin: auto;
/* 文字水平居中 */
text-align: center;
/* 文字大小、行高、字体 */
font: 24px/30px bold 'microsoft yahei';
}