盒模型，CSS水平居中的三种方法

1.谈谈对盒模型的理解，以及如何在css中告诉浏览器使用不同的盒模型来渲染你的布局。

组成：content、padding、border、margin

W3C盒子/内容盒子/标准盒子【默认】

box-sizing：content-box;
width = 内容宽
所占的宽 = width + padding + border + margin

IE盒子/边框盒子

box-sizing:border-box;
width = 内容宽 + padding + border
所占宽 = width + margin

2.css水平居中的方法

方法一

绝对定位：position：absolute；

方法二

margin：50% auto；

方法三

伸缩盒布局：在父元素上设置display:flex;
justify-content:center; 水平主轴对齐方式
align-items:center; 竖直轴线方向