马克加索尔

先馬克，後續再理解

/* 文字大小、行高、字体 */   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';
    }