跳到主要内容

其他布局

多列布局​

column-count 属性​

作用​

  • 设置为 multiple-column 布局；
.container {
  column-count: 3;
}

属性值​

auto​
  • 根据其他 css 属性自动计算；
    • column-width 属性；
integer 类型​
  • 不作详述；

column-width 属性​

作用​

  • 设置为 multiple-column 列宽度；
.container {
  column-width: 120px;
}

属性值​

auto​
  • 根据其他 css 属性自动计算；
    • column-count 属性；
length 类型​
  • 不作详述；

column-rule 属性​

基础​

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

column-rule-width 属性​

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

column-rule-style 属性​

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

column-rule-color 属性​

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

column-gap 属性​

作用​

  • 设置为 multiple-column/flex/grid 列间隔；
.container {
  column-gap: 9px;
}

属性值​

normal​
  • 使用浏览器默认值；
  • multiple-column 为 1 em；
  • 其余布局为 0；
length 类型​
  • 非负值；
percentage 类型​
  • 非负值；

column-span 属性​

作用​

  • 设置对应标签是否能够跨越 multi-column 所有列；
.container {
  column-span: all;
}

属性值​

none​
  • 不可以跨列；
all​
  • 可以跨列；

break-inside 属性​

作用​

  • 设置是否允许单个标签内容中断；
  • 分配至多个列；
.container {
  break-inside: avoid;
}

属性值​

auto​
  • 允许中断；
avoid​
  • 不允许中断；

BFC (块级容器上下文)​

特点​

  • BFC 内部元素垂直排列，水平方向拉伸至父容器宽度；
  • BFC 内部元素的 margin 和 padding 不和外部元素共享边框；
  • BFC 内部相邻块级元素垂直方向发生 margin collapse；
  • BFC 高度计算包括浮动子元素，防止浮动元素溢出；

创建 BFC​

  • 根元素；
  • 设置 float 属性；
  • 设置 position 属性：absolute 或 fixed；
  • 设置 display 属性：flex，grid，flow-root，inline-block 等；
  • 设置 overflow 属性：非 visible 即可；

应用场景​

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

最佳实践​

三栏布局​

概述​
  • 左右两栏固定宽度，中间自适应；
浮动​
  • 容器标签设置为 BFC；
  • 左右两栏设置为浮动；
  • 中间 margin 设置为两侧对应宽度；
.box {
  overflow: hidden;
}
.left {
  float: left;
  width: 200px;
  background-color: gray;
  height: 400px;
}
.right {
  margin-left: 210px;
  background-color: lightgray;
  height: 200px;
}
绝对定位​
  • 左右两栏设置为绝对定位；
  • 中间 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-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: blur(0);
  .overflow {
    height: 0;
    width: 0;
    overflow: hidden;
  }
}