css中盒模型

CSS盒模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

一、标准盒模型

box-sizing:content-box

平常最常用的就是标准盒模型，即box-sizing中的content-box，它指的width和height是内容的width和height

二、IE盒模型（怪异盒模型）

使用场景：当盒模型确定好width和height后，改变padding和border值容易被改变

box-sizing：border-box

它指的width和height是盒子大小，并不是内容的width和height，写高100宽100最终盒子就是高100宽100，无论怎样调border和padding，它会自己通过缩放内容来实现，这样好处在于写样式的时候，不用每次来回算值，现在在真实项目中大部分在应用IE盒模型，包括现在的elementui中样式也是默认使用border-box。

三、flex弹性伸缩盒模型

display:flex; align-items: ## justify-content:##

除此之外，现在在做移动端响应式布局开发的时候，有很多的布局方案应用于css3新提供的弹性伸缩盒模型，设置给父容器盒子为display：flex，那这个盒子就会变成一个弹性伸缩盒子，在这个盒子中有两个轴，一个叫main axis主轴，还有一个cross axis交叉轴，主轴相当于x轴，交叉轴相当于y轴，而这个盒子当中的所有子元素相当于flex item即布局某一项，默认情况下所有项都是靠着交叉轴上面和和主轴左面排列，但是我们可以通过align-items、justify-content控制我们所有项在主轴和交叉轴上的排列方式以及它的自动伸缩的布局方式，从而实现了我们的各种布局方案

更详细了解flex弹性伸缩盒模型：点击学习（Flex 布局教程:语法篇 - 阮一峰的网络日志）

四、多列布局盒模型

这种布局主要应用在pad电脑上文档类，栅格化布局，视觉上和报纸一样，左边、中间、右边分三列布局，每一列和每一列之间的间隔线多粗多细，以及间隔多少都可以通过下列属性设置，这个布局基本不用，了解即可

columns
    设置或检索对象的列数和每列的宽度。复合属性
column-width
    每列的宽度
column-count
    的列数
column-gap
    列间隙
column-rule
    列之间的边框线
columu-rule-color
    设置或检索对象的列与列之间的边框颜色
column-rule-width
column-rule-style
    设置或检索对象的列与列之间的边框样式
    值：dotted...
column-fill
    设置或检索对象所有列的高度是否统一。
    值 auto 列高度自适应内容
    balance 所有列的高度以其中最高的一列统一。
column-span
    设置或检索对象元素是否横跨所有列。
    none 不垮列
    all 横跨所有列