盒模型

标准盒模型

标准和模型的width和height代指content的宽和高 并非是盒子的真实宽高
因为盒子的大小是由content，padding，border三部分组成 再加上margin确定盒子在页面中的位置
其实我们常用的还是标准盒模型 也就是box-sizing中的content-box 指的是 width和height是content的宽高并不是盒子的宽高
So我们在给盒子加border或是padding的时候盒子会被撑大 要想保持盒子原本的大小还得去重新计算content的width height 非常麻烦
后来CS3里面给我们提供了一个方式box-sizing：content-box 也就是所谓的怪异盒模型

IE怪异盒模型

IE怪异盒模型好处：
这里的盒子width和height指的是盒子的大小而不是内容的大小
也就是说 比如我写100100盒子最终也是100100不会被border，padding撑大， 它会自己通过自动缩放自己的content来实现盒子还是100*100 这样在写样式的时候就比较干净卫生了， 不需要每次都来计算width和height
So在大部分项目中都在应用这种box-sizing：content-box IE怪异盒模型
包括我看了Bootstrap以及各大ui组件element-ui 它们的公共样式里面源码大部分也是用的box-sizing：content-box 建议大家习惯性使用

现在在做移动端响应式开发的时候，其实好多布局方案我们可以应用于CS3新提供的 flex弹性伸缩盒模型来实现（膜拜阮一峰大大）

flex弹性伸缩盒模型

给父容器设置一个display：flex 这个盒子就会变成一个弹性伸缩盒子
盒子里面有两个轴一个是main axis（主轴，X轴），一个是cross axis（交叉轴，Y轴），盒子中的所有子元素都叫flex item（某一项）默认都是靠左上排列
可以通过设置justify-content主轴的排列方式 和align-items交叉轴的排列方式来控制flex item

以及多列布局（栅格化布局）

多用于pad 做一些文章类 类似于报纸
分左边中间右边三列布局 每列和每列之间的间隔线多粗多细 以及间隔多少 都可以通过以上属性来搞
OK~~
如果对你有一点点帮助的话点赞加收藏吧，互动必回噢~~~