CSS-13-块级元素和行内元素 

 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>

 

posted @ 2019-07-27 15:55  我只是一个码农  阅读(165)  评论(0)  编辑  收藏  举报