Home思洋影视事业部网站建设知识库
0 Comments

开启盒布局

发布于：2012-12-11  |   作者：广州网站建设  |   已聚集：人围观
开启盒布局

盒布局是CSS 3发展的新型布局方式，它比传统的浮动布局方式更加完善、更加灵活，而使用方法却极为简单。广州网站建设,

开启盒布局的方法，就是把display属性值设置为box或inline-box。目前没有浏览器支持box属性值，为了能兼容webkit内核和gecko内核的浏览器，可分别使用-webkit-box和-moz-box属性。开启盒布局后，文档就会按照盒布局默认的方式来布局子元素。

接下来看一个简单的网页，从左至右排列三个栏目：菜单栏、内容栏和工具栏。传统的实现方式会使用浮动布局方式，现在我们用盒布局的方式来实现三个栏目的横向排列。广州网站建设,

【示例4-1】 一个简单的三栏网页。

广州网站设计



    
	
  1. 
		<!DOCTYPE HTML> 
    2. 
	
  2. 
		<html> 
    3. 
	
  3. 
		<head> 
    4. 
	
  4. 
		<meta charset="utf-8"> 
    5. 
	
  5. 
		<title>一个简单的三栏网页</title> 
    6. 
	
  6. 
		<style type="text/css"> 
    7. 
	
  7. 
		.container {  
    8. 
	
  8. 
		    /* 开启盒布局 */  
    9. 
	
  9. 
		    display:-webkit-box;                /* 兼容webkit内核 */  
    10. 
	
  10. 
		    display:-moz-box;                       /* 兼容gecko内核 */  
    11. 
	
  11. 
		    display:box;                            /* 定义为盒子显示 */  
    12. 
	
  12. 
		}  
    13. 
	
  13. 
		.container div {  
    14. 
	
  14. 
		    color:#FFF;  
    15. 
	
  15. 
		    font-size:12px;  
    16. 
	
  16. 
		    padding:10px;  
    17. 
	
  17. 
		    line-height:20px;  
    18. 
	
  18. 
		}  
    19. 
	
  19. 
		.container div ul {  
    20. 
	
  20. 
		    margin:0;  
    21. 
	
  21. 
		    padding-left:20px;  
    22. 
	
  22. 
		}  
    23. 
	
  23. 
		.container .left-aside {  
    24. 
	
  24. 
		    background-color:#F63;               /* 左侧菜单栏背景颜色 */  
    25. 
	
  25. 
		}  
    26. 
	
  26. 
		.container .center-content {  
    27. 
	
  27. 
		    background-color:#390;               /* 中间内容栏背景颜色 */  
    28. 
	
  28. 
		    width:200px;  
    29. 
	
  29. 
		}  
    30. 
	
  30. 
		.container .right-aside {  
    31. 
	
  31. 
		    background-color:#039;               /* 右侧工具栏背景颜色 */  
    32. 
	
  32. 
		}  
    33. 
	
  33. 
		</style> 
    34. 
	
  34. 
		<body> 
    35. 
	
  35. 
		<div class="container"> 
    36. 
	
  36. 
		  <div class="left-aside"> 
    37. 
	
  37. 
		    <h2>菜单</h2> 
    38. 
	
  38. 
		    <ul> 
    39. 
	
  39. 
		      <li>HTML5</li> 
    40. 
	
  40. 
		      <li>CSS 3</li> 
    41. 
	
  41. 
		      <li>活动沙龙</li> 
    42. 
	
  42. 
		      <li>研发小组</li> 
    43. 
	
  43. 
		    </ul> 
    44. 
	
  44. 
		  </div> 
    45. 
	
  45. 
		  <div class="center-content"> 
    46. 
	
  46. 
		    <h2>内容</h2> 
    47. 
	
  47. 
		    <p>盒布局是CSS 3发展的新型布局方式，它比传统的浮动布局方式更加完善、更加灵活，而  
    48. 
	
  48. 
		    使用方法却极为简单。</p> 
    49. 
	
  49. 
		    <p>开启盒布局方法，就是设置display属性值为box（或inline-box）。</p> 
    50. 
	
  50. 
		  </div> 
    51. 
	
  51. 
		  <div class="right-aside"> 
    52. 
	
  52. 
		    <h2>工具</h2> 
    53. 
	
  53. 
		    <ul> 
    54. 
	
  54. 
		      <li>天气预报</li> 
    55. 
	
  55. 
		      <li>货币汇率</li> 
    56. 
	
  56. 
		    </ul> 
    57. 
	
  57. 
		  </div> 
    58. 
	
  58. 
		</div> 
    59. 
	
  59. 
		</body> 
    60. 
	
  60. 
		</html> 
    61. 




	运行结果如图4-1所示。



	代码分析：在示例4-1中，设置了container类的属性"display:box;"，并针对webkit内核和gecko内核设置了各自的私有属性值。接下来，被赋予container类的元素的内部元素，将改变原有的文档流动方式，使用盒布局默认的文档流动方式，如图4-1所示。



	盒布局包含多方面的内容，开启盒布局只是盒布局的第一步。广州网站设计



	
		

			
				
		

		

			
				图4-1  一个简单的三栏网页
		

	



			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机