弹性盒模型和几种布局方式

怪异盒模型

浏览器对盒模型的解析一共有两种模式，一种是标准模式，另一种就是怪异模式。
一般在页面头部声明了 DOCTYPE，都会触发标准模式，而如果 DOCTYPE 缺失则在 ie6，ie7，ie8 下将会触发怪异模式（quirks 模式）。
标准盒模型和怪异盒模型的区别：
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下，一个块的总宽度= width + margin(左右)（即 width 已经包含了 padding 和 border 值）

Css3 中 box-sizing：属性让两种盒模型相互转变
box-sizing ： content-box || border-box || inherit;
当设置为 box-sizing:content-box 时，将采用标准模式解析计算，也是默认模式；
当设置为 box-sizing:border-box 时，将采用怪异模式解析计算；

新版盒模型

Flex 布局是什么？
传统 的布局方案，是基于盒模型，依赖 display+position+float，但是对于特殊的布局就非常的不方便，如：垂直居中，2009 年为 w3c 提出一种新方案—–flex 布局，目前兼容的浏览器有：
Chrome 21+
Opera 12.1+
FireFox 22+
Safari 6.1+
IE 10+

在未来 flex 布局将成为布局的首选方案
Flex 是 flexinle Box 的缩写，意思是弹性布局；用来为盒模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。即：display：flex；

注：设置了 flex 布局后当前容器内子元素的 float、clear、vertical-align 属性将全部消失

Flex 基本概念

采用 flex 布局的元素，称为 flex 容器，它的所有子元素自动成为容器成员，称为容器项目

容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）.主轴的开始位置（与边框的交叉点）叫做 main start, 结束位置叫做 main end ;交叉轴的开始位置叫做 cross start ,结束位置叫做 cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴叫做 cross size.

容器的属性

  1. display：flex
    设置为弹性盒(父元素添加)

  2. flex-direction (主轴的方向)
    说明：指定了弹性子元素在父容器中的位置
    row 默认在一行内排列
    row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
    column：纵向排列。
    column-reverse：反转纵向排列，从下往上排，最后一项排在最上面

  3. justify-content(主轴对齐方式)
    内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
    flex-start 默认，左对齐
    flex-end 右对齐
    center 居中对齐
    space-between 两端对齐，中间自动分配
    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 排列。

  6. align-content（行与行之间对齐方式）
    当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式，这与调整伸缩项目在主轴上对齐方式的 <’justify-content’> 属性类似。注：本属性在只有一行的伸缩容器上没有效果。
    flex-start没有行间距
    flex-end底对齐没有行间距
    center居中没有行间距
    space-between两端对齐，中间自动分配
    space-around自动分配距离

  7. align-self
    align-self 属性规定灵活容器内被选中项目的对齐方式。
    注意：align-self 属性可重写灵活容器的 align-items 属性。
    auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
    stretch元素被拉伸以适应容器。
    center元素位于容器的中心。
    flex-start元素位于容器的开头。
    flex-end 元素位于容器的结尾。
    Internet Explorer 和 Safari 浏览器不支持 align-self 属性。

  8. order
    number 排序优先级，数字越大越往后排，默认为 0，支持负数

  9. flex-grow
    flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

1
2
3
.item {
    flex-grow: <number>;
}

如果所有项目的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

  1. flex-shrink
    flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
    如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。
    负值对该属性无效。

  2. flex-basis
    flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
    它可以设为跟 width 或 height 属性一样的值（比如 350px），则项目将占据固定空间

  3. flex
    复合属性。设置或检索弹性盒模型对象的子元素如何分配空间
    flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。
    该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
    建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

CSS3 多列分栏布局

  1. column-count：auto | 整数；—控制栏数
  2. column-width：value；—每栏的宽度
  3. column-gap : value ;—两栏之间的间距
  4. column-rule : 宽度，线型，颜色；—栏与栏的间隔线
    类似 border，solid | dotted | dashed 实线 | 点线 | 虚线

column-width 和 column-count 这两个属性提供了分栏的标准，只写其中的一个
column-gap 和 column-rule 就处在相邻两列之间

让某个元素跨栏加到某个元素上：column-span : all / none ; 是否跨栏显示