1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css+div块级元素和行内元素</title> 6 <style type="text/css"> 7 div{ 8 height: 50px; 9 background-color: green; 10 margin-bottom: 5px; 11 /*块级元素转换成行内元素*/ 12 display: inline; 13 /*设置是否显示*/ 14 display:none; 15 } 16 span{ 17 width: 300px; 18 height: 50px; 19 /*行内元素转换成块级元素 支持宽高，但独占一行*/ 20 /*display: block;*/ 21 /*行内元素转换成块级元素 支持宽高，但不会独占一行*/ 22 display:inline-block; 23 background-color: orange; 24 margin-bottom: 5px; 25 } 26 </style> 27 </head> 28 <body> 29 <!--块级元素--> 30 <div>学习</div> 31 <div>吃饭</div> 32 <div>睡觉</div> 33 <div>...</div> 34 <div>...</div> 35 <div>...</div> 36 37 <!--行内元素--> 38 <span>首页</span> 39 <span>课程</span> 40 <span>实战</span> 41 </body> 42 </html>