代码示例

自适应宽度

使用新的 CSS 关键字：min-content。即子元素中最大的一个不可分割元素的大小。

  • max-content类似于将元素设为display-inline得到的宽度
  • fit-content类似于将元素设为浮动得到的的宽度
figure {
  margin: auto;
  width: min-content;
}

figure > img {
  max-width: inherit;
}

固定表格宽度

解决方案：table-layout: fixed。同时，表格中的text-overflow: ellipsis也会起作用。

这时，仍然可以为单元格设置各自的宽度。

table {
  table-layout: fixed;
  width: 100%;
}

根据子元素的数量设置样式

只有一个子元素的情况：:only-child。

li:only-child { }

// 相当于
li:first-child:last-child {}

// 也相当于
li:first-child:nth-last-child(1) {}

由此得出计数方式：

// 第一个元素，同时也是倒数第四个元素
// - 可见父元素总共有 4 个子元素
li:first-child:nth-last-child(4),

// 加上其后的元素
li:first-child:nth-last-child(4) ~ li {
  // 共有 4 个子元素的 ul 下的全部 li
}

:nth-child(n+4)表示第 4 个元素及之后的元素。于是，如果需要设置子元素数量在某个区间内的样式，就可以这样写：

// 是从后往前数的第 4 个及之前的元素，同时也是第一个元素
// 即：列表至少有 4 个元素
li:first-child:nth-last-child(n+4),

// 加上其后的元素
li:first-child:nth-last-child(n+4) ~ li {
  // 至少有 4 个子元素 的 ul 下的全部 li
}

:nth-child(-n+4)表示前 4 个元素，于是，可以这样设置数量区间：

// 是从后往前数的前 6 个元素，即列表中的元素总量不大于 6
// 同时不小于 2
li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li {
  // 子元素数量为 2–6 的 ul 下的 li
}

响应式背景

占满整个宽度的背景色 + 居中的内容区域：

footer {
  padding: 1em calc(50% - 450px);
  background: #333;
}

垂直居中

绝对定位

定位 + transform偏移。

main {
  position: absolute;
    top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);
}

Flex

.parent {
  display: flex;
}

.child {
  margin: auto;
}

或者：

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

目标：当页面很短的时候，footer 要位于页面底部。

body {
  display: flex;
  flex-flow: column;
}

main {
  flex: 1;
}