css三种盒模型总结

---

一，标准盒模型

点击查看标准盒模型介绍

box-sizing：content-box;（标准盒模型）

盒子的总宽度：width+左右padding+左右border

二，怪异盒模型

box-sizing：border-box;（转换成IE盒模型（怪异盒模型））

盒子的总宽度：width（包含padding+border）

好处：设padding时不用再减宽高值

三，弹性盒模型

控制子元素按主轴方向排列

display：flex;

弹性盒可以设置单独内容水平垂直居中
	父元素 	display：flex；
	子元素	 margin：auto；
	灵活元素：如果灵活元素是内联元素也能设置宽高

（1）设置主轴的方向：

flex-direction： ;

X轴:
	row 		   （默认值）
	row-reverse    （水平排列、内容末端排列、类似右浮动）
	
Y轴：
	column 		  （垂直排列、顶端对齐）
	column-reverse（垂直排列、内容相反、底端对齐）

（2）设置内容换行（默认元素会自动挤压、不换行）

flex-wrap: