CSS3盒子模型,flex布局

盒子模型 box-sizing

box-sizing有3个值，content-box(默认值) | border-box | inherit

content-box值代表的意思是：元素的内容的width和height决定了元素的宽高，padding和border无论多少都不影响元素的宽高，它是由内容的width和height值决定的。在这里元素的宽高和元素内容的宽高一样的

border-box值代表的意思是：元素的内容，元素的border，padding一起来决定元素的宽高。直白点说，就是他们是相互制约的，元素内容的宽高变化了，border和padding没变，那元素的宽高也会变。如果padding变了，其他都没变，那元素的宽高也会变。在这里元素的宽高=元素内容宽高+padding+border

弹性布局 flex

1. 创建一个flex容器
   为此要给元素设置display:flex 为保兼容性safari和chrome要带上前缀-webkit-
   .flexcontainer{ display: -webkit-flex; display: flex; }

2. flex项目显示
   flex项目是flex容器的子元素，他们主要是沿着主轴定位，默认是沿着水平轴排列一行，如果要改变主轴的方向，flex容器可以使用flex-direction:column 设置为沿着竖轴排列 flex-direction默认值是row 水平轴排列
   
   .flexcontent{ display:flex; -webkit-display:flex; flex-direction:column;-webkit-flex-direction:column}
   

3. flex项目移动到顶部
   要将flex项目移动到顶部，取决于主轴的方向，如果主轴是水平轴，flex容器使用justify-content设置，如果是竖轴使用align-items设置
   移动到底部，左边右边，方法是一样的

4. flex项目垂直居中
   flex容器设置为justify-content：center 以及 align-items：center

5. flex项目自动伸缩
   需要给每个flex项目设置自动伸缩的值，.bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }