CSS布局：盒模型

BoxModel

在CSS中，这些矩形盒子用 标准盒模型 来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin edge,边框边界border edge,内边距边界padding edge与 内容边界content edge。

而这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。那么内容(CONTENT)就是盒子里装的东西；而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料；边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子(DIV嵌套)，与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

如果 box-sizing 为默认值，width, min-width, max-width, height, min-height 与 max-height控制内容大小。

内边距区域padding area用内容及可能的边框之间的空白区域扩展内容区域。它位于内边距边界内部，通常有背景——颜色或图片(不透明图片盖住背景颜色).它的大小为_padding-box _宽与*padding-box *高。

内边距与内容边界之间的空间可以由 padding-top, padding-right, padding-bottom, padding-left 和简写属性 padding 控制。

边框区域border area是包含边框的区域，扩展了内边距区域。它位于边框边界内部，大小为_border-box _宽和*border-box *高。由 border-width 及简写属性 border控制。

**外边距区域****margin area**用空白区域扩展边框区域，以分开相邻的元素。它的大小为*margin-box *的高宽。

外边距区域大小由 margin-top, margin-right, margin-bottom, margin-left 及简写属性 margin控制。

在 外边距合并 的情况下，由于盒之间共享外边距，外边距不容易弄清楚。

最后，请注意，对于非替换的行内元素来说，尽管内容周围存在内边距与边框，但其占用空间(行高)由 line-height 属性决定。

• 每个HTML标记都可看作一个盒子；
• 每个盒子都有：边界、边框、填充、内容四个属性；
• 每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；

标准文档流与元素分类

层叠上下文与层叠顺序

• 深入理解CSS中的层叠上下文和层叠顺序 > 不起眼的z-index却能牵扯出这么大的学问

height & width

line-height:行高

• css行高line-height的一些深入理解及应用

何为行高？顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线，其中底部第二条线就是基线，是a,c,z,x等字母的底边线。下图的红色线即为基线。

代码：

offsetHeight & clientHeight & scrollHeight

• clientHeight:返回以Pixels为单位的元素的内部高度，包括内边距但是不包括滚动轴的高度、边以及外边距。
• offsetHeight:包括元素的边宽、内边距以及水平滚动轴的高度。
• scrollHeight:返回整个元素内容的高度，包括没有被容纳在当前屏幕中的部分。

譬如下面这个HTML布局中:

<element
  ><!-- *content*: child nodes: -->
  | content A child node as text node | of
  <div id="another_child_node"></div>
  | the ... and I am the 4th child node | element
</element>

scrollHeight包括Entire Content与Padding，而clientHeight包括Visible Content以及padding，offsetHeight包括Visible Content、padding、border以及scrollbar，形象地描述可见下图：

具体的例子可以参考JSFiddle，这里形象地对offset*、client*以及scroll*进行了比较

min-_ & max-_

overflow

margin & padding

Percentage Value:百分比值效果，无论垂直还是水平，百分比值始终参考宽度

• 浅谈Margin和Padding值设置成百分数的布局

当margin设置成百分数的时候，其top right bottom left的值是参照父元素盒子的宽度进行计算，在w3c的规范中也是这样描述的:margin的百分比值参照其包含块的宽度进行计算，同样的padding如果设置成百分数的话，其盒子模型和margin是一样的。这只发生在默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下，当书写模式变成纵向的时候，其参照将会变成包含块的高度。我们可以以如下的例子进行说明:

<div class="demo1">
    <div>这个div设置：margin:10% 5%</div>
</div>

.demo1 {
  height: 500px;
  width: 980px;
  margin: 0 auto;
  background: red;
  overflow: hidden;
}

.demo1 div {
  margin: 10% 5%;
  background: white;
}

据以往的理解，.demo1 div的margin应该是：50px 49px 50px 49px，但是运行以后，通过查看盒模型示意图，却发现是：98px 49px 98px 49px。

为什么要选择宽度做参照而不是高度呢？这其实更多的要从CSS设计意图上去想，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定(仔细回想一下，如果没有显式的定义宽度 或者强制一行显示，都会遇到边界换行，而不是水平延展)，垂直方向可以无限延展。但当书写模式为纵向时，其参照就变成了高度而不再是宽度了。官方文档说明如下:

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for ‘margin-top’ and ‘margin-bottom’ as well. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.

display:box

Box是传统的通用的容器属性，我们首先来介绍下Box的基本用法。因为在下文讲解Flex时候会提及，鉴于部分浏览器并不能支持Flex的全部特性，所以很多时候我们需要利用一些工具或者手写的方式将新版的Flex的语法转化为旧版的Box的语法。如果需要定义一个容器为Box的话，只需要做如下声明：

.box {
  display: -moz-box; /*Firefox*/
  display: -webkit-box; /*Safari,Opera,Chrome*/
  display: box;
}

容器属性

box-pack:子元素主轴对齐

box-pack定义子元素主轴对齐方式。

.box{
-moz-box-pack: center; /*Firefox*/
-webkit-box-pack: center; /*Safari,Opera,Chrome*/
box-pack: center;
}

box-pack属性总共有4个值：

.box{
box-pack: start | end | center | justify;
/*主轴对齐：左对齐(默认) | 右对齐 | 居中对齐 | 左右对齐*/
}

box-align:子元素交叉轴对齐

box-align定义子元素交叉轴对齐方式。

.box{
-moz-box-align: center; /*Firefox*/
-webkit-box-align: center; /*Safari,Opera,Chrome*/
box-align: center;
}

box-align属性总共有5个值：

.box{
box-align: start | end | center | baseline | stretch;
/*交叉轴对齐：顶部对齐(默认) | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满*/
}

box-direction:子元素显示方向

box-direction定义子元素的显示方向。

.box{
-moz-box-direction: reverse; /*Firefox*/
-webkit-box-direction: reverse; /*Safari,Opera,Chrome*/
box-direction: reverse;
}

box-direction属性总共有3个值：

.box{
box-direction: normal | reverse | inherit;
/*显示方向：默认方向 | 反方向 | 继承子元素的 box-direction*/
}

box-orient:子元素行内排列方式

.box{
-moz-box-orient: horizontal; /*Firefox*/
-webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/
box-orient: horizontal;
}

box-orient属性总共有5个值：

.box{
box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
/*排列方向：水平 | 垂直 | 行内方式排列(默认) | 块方式排列 | 继承父级的box-orient*/
}

box-lines:子元素换行

.box{
-moz-box-lines: multiple; /*Firefox*/
-webkit-box-lines: multiple; /*Safari,Opera,Chrome*/
box-lines: multiple;
}

box-lines属性总共有2个值：

.box{
box-lines: single | multiple;
/*允许换行：不允许(默认) | 允许*/
}

子元素属性

box-flex:是否允许缩放

box-flex定义是否允许当前子元素伸缩。

.item{
-moz-box-flex: 1.0; /*Firefox*/
-webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/
box-flex: 1.0;
}

box-flex属性使用一个浮点值：

.item{
box-flex: <value>;
/*伸缩：<一个浮点数，默认为0.0，即表示不可伸缩，大于0的值可伸缩，柔性相对>*/
}

box-ordinal-group:子元素显示次序

box-ordinal-group定义子元素的显示次序，数值越小越排前。

.item{
-moz-box-ordinal-group: 1; /*Firefox*/
-webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/
box-ordinal-group: 1;
}

box-direction属性使用一个整数值：

.item{
box-ordinal-group: <integer>;
/*显示次序：<一个整数，默认为1，数值越小越排前>*/
}