布局

使用 display 属性

display 属性两种作用：

决定盒子是作为行内（ inline ）元素还是块级（ block ）元素，
- 行内元素表现得就像一句话中的单词。同时你不能给行内元素设置一个明确的宽高。
- 块级元素会为自己创建一个新行。
- 也可以用 inline-block 来设定为块级元素，同时在行内布局。
决定子元素如何表现。两大布局：flexbox 和 grid 。

flexbox 会在一个方向对元素布局：

.my-element {
  display: flex;
}

默认情况下， flexbox 会将子元素对齐，同时将他们高度拉伸到一致。

flexbox 的一些基本属性：

而 Grid 会在多维上进行布局：

.my-element {
  display: grid;
  /* 创建一个包含 12 个等宽的列 */
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

/* 第一个元素占 2 行 3 列 */
.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

如果没有用 grid 或者 flexbox ，则会使用普通的流布局。

除了前面的 inline、block、inline-block，还有以下流布局类型：

浮动图片来达到环绕文字的效果：

img {
  float: left;
  margin-right: 1em;
}

浮动元素之后的元素可能会做相应的布局调整，可以在浮动元素后面的元素使用 clear: both 或者在父元素上使用 display: flow-root 。

多列布局（用在列表上）：

.countries {
  column-count: 2;
  column-gap: 1em;
}

此外还有 column-width 属性。

position 有 static（默认值）、relative、absolute、fixed、sticky 值：