跳到主要内容

其他布局

多列布局​

column-count 属性​

作用​

  • column-count: 指定 multiple-column 列数;
.container {
  column-count: 3;
}

属性值​

auto​
  • 根据其他 CSS 属性自动计算;
    • column-width 属性;
integer 类型​
  • integer: 显式列数;

column-width 属性​

作用​

  • column-width: 指定 multiple-column 期望列宽;
.container {
  column-width: 120px;
}

属性值​

auto​
  • 根据其他 CSS 属性自动计算;
    • column-count 属性;
length 类型​
  • length: 期望列宽;

column-rule 属性​

基础​

作用​
  • column-rule: 设置 multi-column 列间隔线样式;
.container {
  column-rule: thick inset blue;
}
成分属性​
  • column-rule-width 属性;
  • column-rule-style 属性;
  • column-rule-color 属性;
简写机制​
  • 成分属性顺序不固定;

column-rule-width 属性​

作用​
  • column-rule-width: 设置列间隔线粗细;
.container {
  column-rule-width: medium;
}
属性值​
  • 同 border-width 属性;

column-rule-style 属性​

作用​
  • column-rule-style: 设置列间隔线样式;
.container {
  column-rule-style: dotted;
}
属性值​
  • 同 border-style 属性;

column-rule-color 属性​

作用​
  • column-rule-color: 设置列间隔线颜色;
.container {
  column-rule-color: red;
}
属性值​
  • 同 border-color 属性;

column-span 属性​

作用​

  • column-span: 设置元素是否跨越所有列;
.container {
  column-span: all;
}

属性值​

none​
  • none: 不跨列;
all​
  • all: 跨越所有列;

break-inside 属性​

作用​

  • break-inside: 设置元素内部是否允许跨列中断;
.container {
  break-inside: avoid;
}

属性值​

auto​
  • auto: 允许中断;
avoid​
  • avoid: 避免中断;

gap 属性​

作用​

  • gap: 设置 flex/grid/multiple-column gutters 尺寸;
#flexbox {
  display: flex;
  gap: 20px 5px;
}

.columns {
  column-gap: 9px;
}

成分属性​

  • row-gap;
  • column-gap;

简写机制​

  • 1 value;
    • row-gap = column-gap = gap;
  • 2 value;
    • row-gap column-gap;

column-gap 属性​

作用​

  • column-gap: 设置列间隔;
  • 适用于 grid、flex、multiple-column;
属性值​
  • normal;
    • multiple-column 为 1em;
    • 其余布局为 0;
  • length 类型: 非负值;
  • percentage 类型: 非负值;

row-gap 属性​

  • row-gap: 设置行间隔;
  • 属性值同 column-gap 属性;

BFC (块级容器上下文)​

特点​

  • BFC 内部 block box 按 normal flow 在 block axis 排列;
  • BFC 隔离内部和外部浮动影响;
  • BFC 阻止内部 margin 与外部 margin collapse;
  • BFC 内部相邻 block box 仍可能发生 margin collapse;
  • BFC 高度计算包括浮动子元素, 防止浮动元素溢出;

创建 BFC​

  • 根元素;
  • float 非 none;
  • 设置 position 属性: absolute 或 fixed;
  • 设置 display 属性: flex, grid, flow-root, inline-block 等;
  • overflow 非 visible/clip;

应用场景​

  • 清除浮动;
  • 解决 margin collapse 问题, 将其中一个包裹至 BFC 中;
  • 自适应多栏布局;

最佳实践​

三栏布局​

三栏布局概述​

  • 左右两栏固定宽度, 中间自适应;
浮动​
  • 容器: 创建 BFC;
  • 左右栏: float;
  • 中间栏: margin 留出两侧宽度;
.box {
  overflow: hidden;
}
.left {
  float: left;
  width: 200px;
  background-color: gray;
  height: 400px;
}
.right {
  margin-left: 210px;
  background-color: lightgray;
  height: 200px;
}
绝对定位​
  • 左右栏: absolute 定位;
  • 中间栏: margin 留出两侧宽度;
.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}
flex 布局​
  • 左右栏: 固定宽度;
  • 中间栏: flex 填充剩余空间;
.outer {
  display: flex;
  height: 100px;
}

.left {
  width: 100px;
  background: tomato;
}

.right {
  width: 100px;
  background: gold;
}

.center {
  flex: 1;
  background: lightgreen;
}

圣杯布局​

圣杯布局概述​

  • 三栏布局的基础之上添加固定高度的页眉和页脚;
flex 布局​
  • 外层 flex: 纵向页眉、主体、页脚;
  • 主体 flex: 横向三栏布局;

对角线布局​

.flex-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
  display: flex;
  background-color: gainsboro;
  justify-content: space-between;
}

.flex-container > div {
  width: 33%;
  height: 33%;
  background: pink;
}

.item-2 {
  align-self: center;
}

.item-3 {
  align-self: flex-end;
}

隐藏元素的方法​

root {
  /* 从文档流删除 */
  display: none;
  /* 隐藏, 仍在文档流中 */
  visibility: hidden;
  opacity: 0;
  transform: scale(0);
  z-index: -1;
  filter: opacity(0);
  .overflow {
    height: 0;
    width: 0;
    overflow: hidden;
  }
}