转自 菜鸟教程
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 边距（外边距） ， 边框 ， 填充（内边距） ，和 实际内容 。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
转自 链接
盒子模型有两种，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
2.标准盒模型下盒子的大小 = content + border + padding + margin
1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度
2.怪异盒模型下盒子的大小=width（content + border + padding） + margin
建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。
CSS盒子模型就是在CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。通过定义一系列与盒子相关的属性，可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。
CSS盒子模型由内容区、填充、边框和空白边四部分组成。内容区是盒子模型的中心，呈现盒子的主要信息内容；填充是内容区和边框之间的空间；边框是环绕内容区和填充的边界；空白边位于盒子的最外围，是添加在边框外周围的空间。
扩展资料：
CSS盒子模型特点：
1、丰富的样式定义：CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2、易于使用和修改：CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
3、多页面应用：CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
参考资料来源：百度百科-CSS盒子模型
什么是flex布局？
传统的布局方案是基于盒模型，依赖于display:block和float+position，但是对于一些特殊的布局来说就不是很方便，如在盒模型中垂直居中。
2009年W3C提出一种新的布局方案，flex弹性盒布局，目前兼容的浏览器有chrome opera IE Firefox Sifari
flex兼容浏览器版本
但是在未来flex布局将会成为布局的首选方案。
flex是flexinle BOX的缩写。意思是弹性布局，用来为盒模型提供最大的灵活性。 任何一个容器（标签）都可以指定为flex布局。用display:flex；
如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效
flex的基本概念
容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）.主轴的开始位置（与边框的交叉点）叫做main start, 结束位置叫做main end 交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.
如果给一个元素设置为flex后，这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。
二
首先要给父元素添加display:flex；将父元素转化为弹性盒
2.用flex-direction来改变盒子里元素的位置
row 默认在一行内排列（从左向右）
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
column ：纵向排列。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
3.内容对齐（justify-content）属性应用在 弹性容器 上，把弹性项沿着弹性容器的主轴线（main axis）对齐
justify-content：flex-start 默认，左对齐（图1）
justify-content:flex-end 右对齐（图2）
justify-content:center 居中对齐（图3）
justify-content:space-between 两端对齐，中间自动分配
justify-content:space-around 自动分配距离
主轴对齐方式
4.align-items（交叉轴对齐方式）
flex-start：顶端对齐
flex-end：底对齐
center：垂直居中对齐
baseline：项目内文本的底线对齐
stretch 默认值 项目的高度自适应容器（注：子元素不能设置高）
交叉轴对齐方式
5.flex-wrap
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
图1（nowrap）注意如果父元素盒设置宽度会自动缩子元素容器宽度
图2（wrap）
图3（warp-reverse）
容器单行或者多行方式
6、align-content（行与行之间对齐方式）
当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式，这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’>属性类似。 注：本属性在只有一行的伸缩容器上没有效果。
flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐，中间自动分配
space-around自动分配距离
