巩固css

rem 原理

• rem布局的本质是等比缩放，一般是基于宽度，假设将屏幕宽度分为100份，每份宽度是1rem，1rem的宽度是屏幕宽度/100,，然后子元素设置rem单位的属性， 通过改变html元素的字体大小，就可以设置子元素的实际大小。
• rem布局加载闪烁的问题 解决方案，媒体查询设置根元素字体大小，比如设计稿是750px;对应的开发方式是1rem=100px,那375px的font-size 大小就是50px（具体方法可以百度一下）
• 比rem更好的方案（缺点兼容不好） vw(1vw是视口宽度的1%，100vw就是视口宽度),vh(100vh就是视口高度)

实现三栏布局

两侧定宽，中间自适应

1. 采用了 absolute，导致父元素脱离了文档流，那所有的子元素也需要脱离文档流。如果页面复杂，那开发的难度可想而知
2. 利用浮动 当中间内容高于两侧时，两侧高度不会随中间内容变高而变高
3. 弹性盒子布局
4. 利用负边距和浮动,实现起来比较复杂
5. 利用网格布局

.container {
  display: grid;
  grid-template-columns: 100px auto 200px;
}

BFC（块级格式化上下文）

BFC 的原理 其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括：

1. BFC 内部的子元素，在垂直方向，边距会发生重叠。
2. BFC 在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。
3. BFC 区域不与旁边的 float box 区域重叠。（可以用来清除浮动带来的影响）。
4. 计算 BFC 的高度时，浮动的子元素也参与计算。

如何生成 BFC

• 方法 1：overflow: 不为 visible，可以让属性是 hidden、auto。【最常用】
• 方法 2：浮动中：float 的属性值不为 none。意思是，只要设置了浮动，当前元素就创建了 BFC。
• 方法 3：定位中：只要 posiiton 的值不是 static 或者是 relative 即可，可以是 absolute 或 fixed，也就生成了一个 BFC。
• 方法 4：display 为 inline-block, table-cell, table-caption, flex, inline-flex

BFC 应用

• 阻止 margin 重叠
• 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div 都位于同一个 BFC 区域之中)
• 自适应两栏布局
• 可以阻止元素被浮动元素覆盖

flex

面试常问，略