这是CSS中的基本盒模型，内盒和外盒的概念都是一样的，而在下面六种具体盒模型的设置和显示上有所不同。
1.内联盒模型
从左到右水平排列，超过父元素宽度时便换行。
width、height和overflow在内联元素上不起作用，因为它们总是与内容的宽度和高度一致。
用margin-left、margin-right来改变内联元素在水平排列中的位置，用line-height设置行高（相当于改变竖直方向的位置，因为margin-top、margin-bottom不起作用）。
border水平的边框会改变内联元素在排列中的位置，左边框会令元素靠左，右边框使下一个元素靠右。而上下边框则会显示于内边距之外，但是没有扩展行高或改变元素在竖直方向上的位置。边框不会对行高造成影响，不过边框能覆盖掉邻近行。
padding应用到内联元素的方式与border完全相同。
2.内联块状盒模型
内联块状元素是位于内联排列顺序中的，就像其他的内联盒子一样，只不过它还包括了一些块状元素的属性：外边距、边框、内边距、宽度和高度。
width和height，设置成auto把内联块状元素包裹住，设置成100%把内联块拉长。注意，被拉长的内联块状元素与块状元素是一样的。
margin有一些独特的内联块状功能。正的margin-top会增加行高，负的则会减小行高。
border和padding能扩展内联元素的外围尺寸，会令它以及后面的内容向右偏移，也会让它变大，增加它所在行的高度。
3.块状盒模型
从上到下竖直排列。Terminal块状元素在其内盒里创建了一个内联格式化环境，但是它的外盒此时一定是处于块状格式化环境下。
块状元素的宽高可与它的父元素一致，也可以小于或大于它的父元素，当它的尺寸大于父元素的时候，就会溢出来。
width默认值是auto，它使元素的宽度与父元素一致。
height默认值是auto，它使元素的高度包裹住它的所有子元素。
margin-left和margin-right会调整块状元素已设置的尺寸，会让内盒变小。
margin-top和margin-bottom，浏览器会抵消相邻块状元素的顶部和底部外边距。
用
margin-left: auto和margin-right: auto控制已固定了尺寸的块状元素的水平排列。设置width和margin-right: auto会令块状元素排列在其父元素的左侧；margin-left: auto会在右侧；同时设置则会居中。border和padding会扩展盒模型的外宽和外高。对被拉长了的块状元素来说，水平边框和内边距会改变内盒的大小。而对于固定尺寸的块状元素来说，它们会调整外盒。
4.表格盒模型
表格是一个含有很多行单元格的块状盒模型。表格也位于块状元素的排列中，而表格中的单元格则按“行”和“列”来排列。
表格有外边距，没有内边距。单元格有内边距，没有外边距。
width和height，这是表格边框外围的宽高，而不像其他盒模型是内盒的宽高。
不能把overflow应用于表格，因为表格是不能溢出的。只有表格的单元格能溢出。
border-collapse决定了邻近的边框是否合并为一个。
table-layout决定了表格是固定大小（fixed）还是依据其内容而变动（auto）。
5.绝对定位盒模型
绝对定位元素从正常的元素排列顺序中脱离了，把它置于更高的一层或更低的一层。
它是相对于最近的定位祖先（relative或absolute的祖先，都没有的话直到html根元素）来定位，或者固定于视窗的某个位置。
不像其他的盒模型，绝对定位盒模型的位置不会影响其他盒模型的位置。
z-index控制定位元素的叠放顺序。
left、right、top和bottom都设置为auto（默认值）时，则绝对定位盒模型的位置与它原先在排列顺序中的位置一致。
width默认值为auto。
当width是auto并且left和right也是auto时，盒模型就是被包裹的。
当width是auto并且left和right是0或其他什么值的时候，盒模型会被拉伸。
当width有一个值，left有一个值且right是auto时，盒模型就被固定了尺寸并从左侧偏离。
当width有一个值，right有一个值且left是auto时，盒模型也是固定大小的，并从右侧偏离。
height、top和bottom的运作方式与width、left和right类似。
margin为正时，会令绝对定位的盒模型移向它的容器中心。当它为负时，则会远离中心。
border和padding会缩小已拉伸的绝对定位盒模型的内盒。border和padding会扩展已设定尺寸的盒子的外盒，并把绝对定位盒模型包裹住，将其移向容器的中心。
6.浮动盒模型
浮动元素也脱离了正常的元素排列顺序，被置于邻近块状元素的边框和背景之上。这会缩小浮动元素的父元素，当所有子元素都浮动的时候，父元素的范围便完全消失了。
即使浮动元素脱离了原本元素的排列队伍，它会令队伍中邻近的内容朝某个方向缩进。左浮动会令邻近的内容向右缩进。
浮动元素是在原本的竖直方向上依次排列的，当浮动元素不能紧邻它的下一个浮动元素的时候，它会挪到下方。
浮动元素的位置、大小、内边距、边框和外边距都会影响邻近浮动元素和邻近内联内容的位置。浮动元素的精确位置是不能事先定义的。
width默认值是auto，会令它的宽度与其最长的行一致。
height默认值是auto，会包裹住整个浮动元素，使它的高度与其子元素的总高度相一致。
浮动元素的外边距是不会互相抵消的。
border和padding增大了浮动元素的外盒尺寸。
注意，float具有破坏性，会让元素呈现出inline-block的一些性质，即使该元素原来是inline的。
总结width和height
width: auto
水平包裹以下几种盒模型：内联、内联块状、浮动、表格，和绝对定位（当left和right都设置为auto时）。
水平拉伸块状，和绝对定位盒模型（当left和right都设置了一个值，例如0）。
width: 100%
会把元素的宽度设置为其父元素的宽度，但是不像auto，
width: 100%拥有一些限制，浏览器不会自动调整宽度以保持元素被拉伸。元素的水平外边距、边框或者内边距能够扩展它的宽度，甚至可超越父元素的宽度。
height: auto
竖直包裹以下几种盒模型：内联、内联块状、块状、浮动、表格和绝对定位（当top和bottom都设置为auto时）。
竖直拉伸绝对定位盒模型（仅当top和bottom都设置了一个值，例如0）。这是竖直拉伸盒模型的最好方法，因为height: 100%会有一些局限性。
height: 100%
- 会把元素的高度设置成与父元素一样，其他与
width: 100%类似。