CSS

BFC

块级格式化上下文，它是一个独立的渲染区域，让处于 BFC 内部的元素和外部的元素相互隔离，使内外元素的定位不会相互影响。body、根元素 html 都符合 BFC

特性：

• 在页面上是一个独立的容器,外面的元素和里面的元素互不影响
• BFC 元素不会和浮动的元素重叠
• 计算 BFC 元素的高度时,里面浮动元素的高度也会参与计算

触发 BFC 特性的条件：

• float：除 none 以外的值
• position：(absolute、fixed)
• display： inline-block、table-cells、flex
• overflow：除了 visible 以外的值 (hidden、auto、scroll)

常用：display: inline-block 或 overflow:hidden。但是 overflow: visible 这一个条件并不适用于 body 元素，具体原因可参考这个问题下的采纳回答：重提 CSS 中外边距折叠问题

应用：

• 父子 margin 塌陷和 margin 垂直合并
• 清除内部浮动
• 实现两栏适应布局

定位

position

• static。默认，元素会在普通文档流上
• relative。相对自身位置定位
• absolute。以最近的非 static 父级元素作为参考进行定位。元素会脱离普通文档流
• fixed。以浏览器窗口作为参考进行定位，当父元素使用了 transform，会以父元素定位
• sticky。粘性定位 relative + fixed

浮动 float

• 元素会脱离普通文档流，会有文字环绕

display

可以控制元素状态和布局，常见 block/none/inline/inline-block/flex/grid/...

常见布局

• 水平垂直居中
• 双栏布局/左定宽右自适应
• 圣杯布局
• 双飞翼布局
• 中间定宽，两侧等宽自适应缩放

参考

• https://blog.csdn.net/qq_39903567/article/details/114751532
• https://www.liuxing.io/blog/css-layout/

Flex

flex 布局默认特性：

• 把所有子项变成水平排列
• 默认不自动换行
• 让子项与其内容等宽，并把所有子项的高度变为最高子项的高度

flex 是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto，意思是项目默认有剩余空间也不放大（0），但空间不足会缩小（1）

子元素设置 flex: 1 等同于：flex: 1 1 0%

flex-basic 和 width 的区别

参考 https://renjianzhide.com/archives/flex-basis-width

一些问题

清除浮动

• 父元素设置为 BFC，清除内部浮动；或者父元素设置定高
• 追加伪元素

.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

几种隐藏元素的对比

• display: none。会发生回流，不会占据空间，不能点击；子孙结点会消失
• visibility: hidden。继续占据空间，不能点击；子孙结点会消失，但是可以通过设置让子孙结点显示；读屏器会读取
• opacity: 0。继续占据空间，可以点击；子孙结点会消失

参考

• 深入理解 Flex 属性