css学习(三)对齐 justify-content、align-content 设置网格容器的对齐方式，justify

网格布局

gird-template-row(columns) 设置行列属性
gap 设置网格线宽度
grid-template-area 给单元格命名
grid-column、grid-row 设置元素在容器中的位置
对齐 justify-content、align-content 设置网格容器的对齐方式，justify-items、align-items设置网格容器内所有子元素的对齐方式，justify-self、align-self对容器内单个子元素设置对齐方式。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="grid">
      <div></div>
      <div class="special"></div>
      <div></div>
      <div></div>
      <div class="special"></div>
      <div></div>
      <div class="special"></div>
      <div></div>
    </div>
  </body>
</html>

:root {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  background-color: #709b90;
  font-family: Arial, Helvetica, sans-serif;
}

body * + * {
  margin-top: 1.5em;
}

.grid {
  width: 1080px;
  height: 600px;
  background-color: white;
  display: grid;
  grid-template-columns: repeat(6, 150px);
  grid-template-rows: repeat(3, 150px);
  gap: 1em;
  justify-items: center;
  align-items: center;
  justify-content: space-between;
  align-content: space-around;
}

.grid > div {
  margin: 0;
  width: 100px;
  height: 100px;
  background-color: blue;
}

.grid > div.special {
  align-self: flex-end;
  justify-self: start;
  height: 300px;
  grid-row: span 2;
}

定位，层级

fixed 在视图窗口的固定位置
absolute 根据祖先元素进行绝对定位
relative 相对定位，移动不会影响周围的元素，不能通过同时设置left/right和top/bottom改变元素的大小
sticky 位置和父元素的大小相关，在要离开视口时，并且父元素没有离开视口，位置设置生效，相对于视口的位置，否则位置设置无效。
z-index 同级元素数值越小越先被渲染

响应式布局

优先做移动端布局，然后根据视口宽度逐级编写布局。
@media 通过媒体查询器来设置对应尺寸、横竖屏等情况下不同的布局。