CSS盒模型与布局

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 讲义》第二版