* { /* *是通配符，表示所有元素。即全局选择器 */
    /* html里所有的元素都是box，所以这里设置了所有元素 */
    box-sizing: border-box; /* 使元素的宽度和高度包括padding和border，但不包括margin.
                所以元素的size是可能大于content的大小的，除非显性pading margin border都是0 */
        /* box-sizing: content-box; 
            /*  是默认值，使元素的宽度和高度只包括content，不包括padding、border和margin.
                所以元素的size不一定是设置的大小，除非显性pading margin border都是0 */
  }
  
  body {
    margin: 0; /* body的margin默认是8px，所以这里设置为0 */
    font-family: sans-serif;
    background: #f5f6f7;
  }
  
  .header {
    text-align: center;
    text-transform: uppercase; /* 文本强制转换为大写 */
    padding: 32px;
    background-color: #0a0a23;
    color: #fff;
    border-bottom: 4px solid #fdb347;
  }
  
  .gallery {
    display: flex;  /* .gallery使用flex布局，使元素变为flex container。直属子元素变为flex item(container) */
        /* 一下4个属性是flex的属性，只能用在flex布局的元素上 */
        flex-direction: row; /* 水平排列。还有其他排列：column、row-reverse、column-reverse */
        flex-wrap: wrap;    /* 默认nowrap。根据viewport的宽度，自动换行。还有wrap-reverse */
        justify-content: center; /* 水平居中。还有flex-start、flex-end、space-between、space-around */
        align-items: center; /* 垂直居中。根据flex-direction, row时垂直居中，column时水平居中。
                            还有flex-start、flex-end、stretch、baseline */
    gap: 16px;  /* 每个item之间的间隔，是通用container的属性，flex, grid, and multi-column layout. */
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 10px;
  }
  
  .gallery img { /* 复合选择器，选择class="gallery"下的所有img元素(flex item) */
    width: 100%;
    max-width: 350px; /* 虽然width是100%，但是max-width限制了最大宽度 */
    height: 300px;
    object-fit: cover; /* 因为img元素被统一规格，所以用cover显示图片的一部分，来充满整个img元素，保证不变形 */
    border-radius: 10px;
  }
  
  .gallery::after { /* 创建伪元素，选择class="gallery"下的所有元素的最后一个元素 */
    content: "";  /*  伪元素必须有content属性，但是可以为空. 这里相当于创建了一个占位元素. 
                      因为align-items: center; 且img有9张，当视图是两列时, conten使第9张图左移，对齐第一列 */
    width: 350px;
  }