盒模型

盒模型的特点：

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

盒模型属性

盒子的内容

常用属性
* overflow:visible（可见不裁剪）/hidden（隐藏）/scroll（滚动：滚动条占据盒子内容的宽高）/auto（如果内容需被裁剪，则浏览器以滚动条显示其余内容）;
* text-overflow:clip(裁剪)/ellipsis（省略）;

单行文本溢出省略：
   text-overflow:ellipsis;
   white-space:nowrap;
   overflow:hidden;
多行文本溢出省略：
   overflow:hidden;
   text-overflow:ellipsis;
   display:-webkit-box;
   -webkit-line-clamp:显示的行数；
   -webkit-box-orient:vertical;

padding
四个值：上右下左
三个值：上（左右）下
两个值：(上下）(左右)
一个值：（上下左右）
注释：不允许使用负值。
border
值的个数排序同padding

常用属性
* border-style:solid(实线)/dashed（虚线）/dotted（点线）/double（双线）/none（无线型）;
* border-width
* border-color
* border-top/border-right/border-bottom/border-left
* border:1px solid red;(简写属性：border-width;border-style；border-color；）
margin
值的个数排序同padding
注释：允许使用负值。
块级元素的垂直相邻外边距会合并（谁大取谁值），而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。

标准盒模型

W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分

盒子的实际占位宽度=(margin-left)+(border-left)+(padding-left)+content+(padding-right)+(border-right)+(margin-right);
盒子的实际宽度=(border-left)+(padding-left)+content+(padding-right)+(border-right);

怪异盒模型

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding

盒子的实际占位宽度=(margin-left)+content+(margin-right);
盒子的实际宽度=contentWidth;

标准盒模型和怪异盒模型举例计算

例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，如果用标准 W3C 盒子模型解释，那么这个盒子需要占据的位置为：宽 20 * 2+1 * 2+10 * 2+200=262px、高 20 * 2+1 * 2+10 * 2+50=112px，盒子的实际大小为：宽 1 * 2+10 * 2+200=222px、高 1 * 2+10 * 2+50=72px；如果用IE 盒子模型，那么这个盒子需要占据的位置为：宽 20 * 2+200=240px、高 20 * 2+50=70px，盒子的实际大小为：宽 200px、高 50px。

为了解决浏览器的兼容性

一般都会选择标准盒模型，前提是在网页的顶部加上 DOCTYPE 声明

盒模型的转换方式

box-sizing:
1）content-box宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
2）border-box为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
3）inherit规定应从父元素继承 box-sizing 属性的值。
注意处理浏览器兼容性
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

DIV+CSS两种盒子模型
 DIV+CSS两种盒子模型（W3C盒子与IE盒子）