馬克加索爾

先馬克，後續再理解

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