快速调试 CSS 的技巧
## 使用原子化 CSS 工具包
比如把常见的 flex 布局封装成一个类名，这样就可以直接在 HTML 中使用了。
```css
.flexCenter {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
```
```html
<div class="flexCenter">
<div>1</div>
<div>2</div>
</div>
```
## 通过画 border 或者 background-color 快速直观定位容器的宽高和位置
```css
.container {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: rgba(255, 0, 0, 0.1);
}
```
```html
<div class="container">
<div>1</div>
<div>2</div>
</div>
```
或者封装成类名，直接在 HTML 中使用，上线之前把 debugB 内容置空
```css
.debugB {
border: 1px solid red;
}
/* .debugB {} */
```
```html
```html
<div class="container debugB">
<div>1</div>
<div>2</div>
</div>
```
```
