盒模型
1.什么是盒模型？
盒模型就是一个盒子，封装HTML元素，所有的html元素都可以说是一个盒模型，它包括边框，边距填充和内容
2.盒模型有两种
标准盒模型
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
怪异盒模型（IE盒模型）
在怪异模式下，一个块的总宽度=内容的width（包含了padding[左右]和border[左右]的值）+margin（左右）
3、两种盒模型的切换
box-sizing可以切换盒模型(默认属性是content-box)
box-sizing: content-box 是W3C(标准)盒子模型
box-sizing: border-box 是IE(怪异)盒子模型
flex布局
flex布局就是弹性布局任何容器都可以指定为一个弹性布局，可以简便、完整、响应式地实现各种页面布局
基本概念：采用Flex布局的元素，称为Flex容器。它的所有子元素自动成为容器成员，称为Flex项目
容器属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
总结如图所示
例如：
justify-content:
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
注意：设为Flex布局以后，子元素的float,clear和verticak-align属性将失效