临时抱佛脚

1.CSS布局左侧固定，右侧自适应

.container { display: flex; } 
.left { 
    width: 200px; /* 固定宽度 */ 
} 
.right { flex: 1; /* 自动占据剩余空间 */ }

// 方案二
.container { overflow: hidden; /* 清除浮动 */ } 
.left { float: left; width: 200px; background: #eee; } 
.right { margin-left: 200px; /* 值要等于左侧宽度 */ background: #ddd; }

// 方案三
.container { 
    display: grid; 
    grid-template-columns: 200px 1fr; /* 左侧固定200px，右侧1fr自适应 */ 
} 
.left { background: #eee; } 
.right { background: #ddd; }

// 方案四
calc计算函数

2.正常盒模型和IE盒模型的区别

box-sizing: border-box; // IE width = 宽度
box-sizing: content-box; // 默认值 border + padding + width

3.什么是BFC

什么是BFC？

1. BFC可以把它理解成页面中一块独立渲染的区域, 并且在这个区域中，内部的元素布局不会影响到外部的元素

2. 用来解决一些出现样式问题的场景，比如：边距重叠、高度塌陷、清除浮动

3. 假设现在有两个元素垂直排列，上面元素给它设置一个margin-bottom: 50px;下面元素设置一个margin-top: 50px,
   这个时候就会导致两个元素的上下边距重叠，可以给这两个元素添加一个外层元素，
   然后在外层元素设置一个overflow: hidden 属性，开启BFC就可以解决这个样式问题
    
4. 比如还有父元素没有设置高度，想要被浮动的子元素撑开，可以给父元素设置了一个overflow: hidden; 
   开启BFC就可以解这种高度塌陷问题
   
5. 防止父子元素外边距塌陷，比如第一个子元素设置margin-top，会作用到父元素身上，
   也可以使用overflow: hidden; flex布局 inline-block、float 解决这个问题
  
overflow: hidden | auto ...; 
display: flex inline-block
float: left | right
position: absolute | fixed
html 根元素

4.flex: 1 1 0% === flex: 1 代表什么，flex 属性作用是什么：按照比例分配剩余空间

分配剩余空间
flex-grow: 1; // 默认值：0，负值无效，正数值，控制弹性项在剩余空间的划分，
还有就是不剩余的情况, 不希望元素被缩小
flex-shrink: 1 // 默认值：1， shrink设置为0表示我自己不缩放，让其他元素去缩

flex-basis: 20px; 如果basis有值就会决定当前元素大小，优先级高于width

5.解决1px问题？ 如何设置字体小于12px？ transform: scale(0.5);

6.CSS居中