css盒子模型

网页中所以元素都具备以下四个属性

从里到外是

content(内容)

padding(内边距)

border(边框)

margin(外边框)

标准盒子模型（W3C盒子模型）

宽度width=content(内容的宽度)

总宽度=content(内容宽度)+padding(左右)+border(左右）+margin（左右）

宽度width=100px

总宽度=100px+20px*2+4px+0px

怪异盒子模型（IE盒子模型）

宽度width=content(内容宽度)+padding(左右)+border(左右)

总宽度=width+margin(左右)

宽度width=100px

总宽度=100Px+0px

盒子模型切换（box-sizing)

box-sizing:content-box(标准模式，默认这种方式）

box-sizing:border-box(怪异模式)

弹性盒子模型（flex)

注释：父容器display:flex

父容器上的属性

flex-direction(子项目的排列方向)

flex-wrap (子项目多行)

flex-flow(flex-direction和flex-wrap一起指定)

justify-content(水平对齐)

align-items(垂直对齐)

align-content(多行对齐)

子项目属性

order(顺序指定)

flex-grow(子项目延伸比例)

flex-shrink(子项目收缩比例)

flex-basis(子项目的基本宽度)

align-self(子元素垂直对齐)