1.1两种基本的盒模型
block类型：这种盒模型的元素不会占据一行，允许通过CSS设置宽度、高度。例如<div>、<p>元素。
inline元素：这种盒模型的元素不会占据一行（默认允许在一行放置许多元素），即使通过CSS设置高度和宽度也不会起作用。例如<span>,<a>。
CSS为display属性提供了block和inline两个属性值，用于改变HTML元素默认的盒模型，例如代码如下：
<style type="text/css">
div,span{
width: 300px;
height: 40px;
border: 2px solid #000000;
}
body>div{
display: inline;
}
body>span{
display: block;
}
</style>
<div>div元素一</div>
<div>div元素一</div>
<span>span元素一</span>
<span>span元素二</span>效果如下：
1.2 none值和vivibility属性
display 属性值可以定义为none，用于设置目标对象隐藏，其占用的页面空间也会释放，与此类似的还有visibility属性，该属性也可以对目标对象设置是否显示。与dispaly属性不同，当通过visibility属性隐藏某个HTML元素后，该元素占用的页面空间依然会被保留。Visibility属性的两个值为hidde和visible，分别用于控制目标对象的隐藏和显示。
<style type="text/css">
div{
width: 300px;
height: 40px;
background-color: #ddd;
border:2px solid black;
}
</style>
<input type="button" value="隐藏" onclick=" document.getElementById('text1').style.display='none';" />
<input type="button" value="显示" onclick=" document.getElementById('text1').style.display='' ;"/>
<div id="text1">
通过diaplay来控制
</div>
<input type="button" value="隐藏" onclick=" document.getElementById('text2').style.visibility='hidden' ;" />
<input type="button" value="显示" onclick=" document.getElementById('text2').style.visibility='visible' ;" />
<div id="text2">
通过visibility来控制
</div>
<hr />效果如下：
1.3 inline-block类型的盒模型
CSS还提供了一种inline-block类型的盒模型，通过为display属性设置inline-block即可实现这种盒模型，他是inline类型和block类型的综合体，inline-block类型的元素既不会占据一行，同时也支持通过width、height指定宽度和高度。通过inline-block类型的盒模型可以非常方便的实现多个div元素的并列显示，也就是说，inline-block类型的盒模型可以实现多栏布局，在默认的情况下，多个inline-block类型的盒模型的元素将会采用底部对齐的方式，也就是它们的低端会位于同一水平线上，这可能不是多栏布局期望的结果。为了让多个inline-block类型的盒模型在顶部对齐，为它们增加vertical-align:top；即可。
<style type="text/css">
body>div{
text-align: center;
}
div>div{
display: inline-block; //四个div元素都设置为inline-block 类型 四个元素可以在同一行内展示
border:1px solid black;
}
a{
text-decoration: none;
display: block; //a元素是block 类型 它们会占满整个父容器
width: 120px;
padding: 10px;
background-color: #eee;
}
a:hover{
background-color:#aaa ;
font-weight: bold;
}
</style>
<div>
<div> <a href=""> 百度</a> </div>
<div> <a href=""> 淘宝</a> </div>
<div> <a href=""> 京东</a> </div>
<div> <a href=""> 阿里巴巴</a> </div>
</div>效果如下：
1.4 inline-table类型的盒模型
在默认的情况下，table属于block类型的盒模型，该元素默认占据一行，它的左边不允许出现其他内容，它的右边也不允许出现其他内容，它可以设置宽度和高度。CSS为table元素提供了一个inline-table类型的盒模型，这个盒模型允许表格通过width、height来改变它的宽度和高度，而且它的左边和右边允许出现其他内容。
<style type="text/css">
td{
border: 1px solid black;
}
table{
display: inline-table;
width: 360px;
vertical-align: bottom;
}
</style>
前面内容
<table border="" cellspacing="" cellpadding="">
<tr>
<td>百度</td>
<td>淘宝</td>
</tr>
<tr>
<td>京东</td>
<td>阿里巴巴</td>
</tr>
</table>
后面内容
</body>效果如下：
1.5使用table类型的盒模型实现表格
CSS还为display提供以下属性值：
table：将目标HTML元素显示为表格。
table-caption:将目标HTML显示设置为表格标题
table-cell:将目标HTML元素显示为单元格
table-column:将目标HTML元素显示为表格列
table-column-group:将目标HTML元素显示为列组
table-header-group:将目标HTML元素显示为表格头部分
table-footer-group: 将目标HTML元素显示为表格页脚部分
table-row:将目标HTML元素显示为表格行
table-row-group:将目标HTML元素显示为表格行组
<style type="text/css">
div>div{
display: table-row;
padding: 10px;
}
div>div>div{
display: table-cell;
border: 1px solid black;
}
</style>
<div style="display: table; width: 400px;">
<div style="display: table-caption;" > 这是标题 </div>
<div >
<div>百度</div>
<div>淘宝</div>
</div>
<div>
<div>京东</div>
<div>阿里巴巴</div>
</div>
</div>
效果：
1.6 list-iten类型的盒模型
list-item模型可以将目标元素转换为类似<ul/>的列表元素，也可以同时在元素前面添加列表标志。
<style type="text/css">
div{
display: list-item;
list-style-type: square;
margin-left: 100px;
font-size: 30px;
}
</style>
<div>百度</div>
<div>淘宝</div>
<div>腾讯</div>效果：
1.7run-in类型的盒模型
run-in类型的盒模型的行为取决于它周围的元素。通常浏览器会分为一下三种情况：
A. 如果run-in类型的元素包含一个block 类型的元素，那么该run-in类型的元素会自动转换为block类型的元素。
B. 如果run-in类型的元素的相邻兄弟元素是block类型的元素，那么rin-in 类型的元素将变成inline行为，被自动插入作为其兄弟元素的第一个元素。
C. 在其他情况下，run-in 类型的元素会被当作block类型的元素。
<style type="text/css">
span, p{
padding: 6px;
}
</style>
<span style=" display: run-in; border: 1px solid black;"> run-in </span>
<p style="border: 2px solid red;"> block </p>
<span style="display: run-in; border: 1px solid black;"> run-in </span>
<p style="border: 2px solid red ; display: inline;"> inline </p>参考资料：《疯狂HTML5+CSS3+JavaScript 讲义》第二版