面试盒模型

Posted 2021-03-06 lyralee

现在的盒模型主要有三种：

1. 标准盒模型

box-sizing: content-box;

这种盒模型是平时默认使用的方式。即设置的width/height的属性是content-box的属性。

2. 怪异盒模型

box-sizing: border-box;

这种盒模型在实际开发中最方便。即width/heigth属性是border-box的属性。

3. 弹性盒模型

即flex盒模型。这种模型将父容器设置为

display: flex

这种盒模型对于样式的设置极其方便。