3 CSS3 盒模型

1、网页渲染模式：标准渲染模式、混杂(怪异)渲染模式 ->浏览器都有两种渲染网页模式

IE6混杂模式盒模型：代码区设置的宽/高 =  元素宽/高 + padding + border;//聚焦点"IE6"、“混杂模式” ->IE6标准模式下盒模型也同w3c标准盒模型相同，同时IE浏览器其它版本标准或者混杂模式下盒模型也同w3c没区别；

box-sizing:border-box;/content-box;

resize: none/both/horizontal/vertical/inherit;//常用于textarea元素上，若用于其它元素上，该元素必须设置overflow属性，否则不生效；->resize属性的"拉伸"往往影响后续元素布局(引起重绘、重排)，若使用其最好设定"父元素"范围，减低后续布局影响；

2、弹性盒子

(1).display:flex/inline-flex;//部分css属性在弹性盒子中不起作用：float, clear, column,vertical-align等

(2).伸缩容器属性: display:flex;flex-direction;flex-wrap;justify-content;align-items;align-content;

(3).伸缩项目属性: order;align-self;flex-grow;flex-shrink;flex-basis;

demo: 子元素居中显示 -> div{  display: flex;   justify-content: center;   align-items: center; }

demo: 弹性布局实现三栏布局；