前端面试精简篇
本文档为前端面试精简篇，涵盖了 CSS 相关知识点，包括左边定宽右边自适应方案、左右两边定宽中间自适应方案、左右居中行内元素、上下垂直居中、盒模型等内容。
左边定宽右边自适应方案
在实现左边定宽右边自适应的布局时，我们可以使用 float + margin 或 float + calc 两种方案。其中，float + margin 方案中，我们可以将左边元素设置宽度为 120px，并将其浮动到左边，然后将右边元素的 margin-left 设置为 120px，从而实现左边定宽右边自适应的效果。
```css
.left {
width: 120px;
float: left;
}
.right {
margin-left: 120px;
}
```
在 float + calc 方案中，我们可以将左边元素设置宽度为 120px，并将其浮动到左边，然后将右边元素的宽度设置为 calc(100% - 120px)，从而实现左边定宽右边自适应的效果。
```css
.left {
width: 120px;
float: left;
}
.right {
width: calc(100% - 120px);
float: left;
}
```
左右两边定宽中间自适应方案
在实现左右两边定宽中间自适应的布局时，我们可以使用 float、float + calc、圣杯布局 (设置 BFC，margin 负值法) 等方案。其中，在 float 方案中，我们可以将左边元素设置宽度为 120px，并将其浮动到左边，将右边元素设置宽度为 120px，并将其浮动到右边，然后将中间元素的 margin 设置为 0 120px，从而实现左右两边定宽中间自适应的效果。
```css
.left {
width: 120px;
float: left;
}
.right {
width: 120px;
float: right;
}
.center {
margin: 0 120px;
}
```
左右居中行内元素
在实现左右居中行内元素时，我们可以使用 text-align: center 属性将元素居中。对于定宽块状元素，我们可以将左右 margin 值设置为 auto 实现居中效果。对于不定宽块状元素，我们可以使用 table 布局或 position + transform 实现居中效果。
```css
.wrap {
text-align: center;
}
.center {
display: inline;
}
```
上下垂直居中
在实现上下垂直居中的布局时，我们可以使用 margin、position + margin (负值)、flex、IFC + vertical-align: middle 等方案。其中，在定高方案中，我们可以将元素高度设置为 100px，然后将 margin 设置为 50px 0 实现垂直居中效果。
```css
.center {
height: 100px;
margin: 50px 0;
}
```
在不定高方案中，我们可以使用 position + transform 实现垂直居中效果。
```css
.center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
```
盒模型
盒模型是 CSS 中一个重要的概念，包括内容区 (content)、内边距 (padding)、边框 (border) 和外边距 (margin) 四个部分。我们可以使用 box-sizing 属性来控制盒模型的计算方式，包括 content-box、border-box 和 inherit 三种方式。
```css
.box {
box-sizing: border-box;
}
```
BFC
BFC (Block Formatting Context) 是一个独立的渲染区域，具有自己的布局规则，可以用来解决浮动元素的布局问题。
以上是本文档的主要内容，涵盖了多个 CSS 知识点，希望能够帮助读者更好地理解和掌握这些知识点。
