经典布局与隐藏元素

三栏布局如何实现？

• 目标: 左右两栏固定宽度, 中间自适应;
• 浮动方案: 容器建 BFC, 左右栏 float, 中间栏用 margin 留出两侧宽度;

.box {
  overflow: hidden;
}
.left {
  float: left;
  width: 200px;
}

• 绝对定位方案: 左右栏 absolute, 中间栏用 margin 留出两侧宽度;
• flex 方案: 左右栏固定宽度, 中间栏 flex: 1 填充剩余空间;

.outer {
  display: flex;
}
.center {
  flex: 1;
}

圣杯布局与三栏布局有何区别？

• 圣杯布局: 在三栏基础上添加固定高度的页眉与页脚;
• 实现: 外层 flex 纵向排列页眉/主体/页脚, 主体再 flex 横向三栏;

隐藏元素有哪些方法, 有何区别？

写法	是否离开文档流	是否响应事件
display: none	是	否
visibility: hidden	否	否
opacity: 0	否	是
transform: scale(0)	否	是
height: 0 + overflow: hidden	否	否

• z-index: -1 与 filter: opacity(0) 也可用于隐藏;