盒模型和flex布局

盒模型

1.什么是盒模型？
盒模型就是一个盒子，封装HTML元素，所有的html元素都可以说是一个盒模型，它包括边框，边距填充和内容
2.盒模型有两种
标准盒模型
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

怪异盒模型（IE盒模型）

3、两种盒模型的切换
box-sizing可以切换盒模型(默认属性是content-box)
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型

flex布局

flex布局就是弹性布局任何容器都可以指定为一个弹性布局 可以简便、完整、响应式地实现各种页面布局 容器属性 flex-direction flex-wrap flex-flow justify-content align-items align-content