元素之间的转换：
◆块元素转行内元素
display：inline；
◆行内元素转化为块元素
display:block;
◆块和行内元素转行内元素
display:inline-block;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 /* 块元素转化为行内元素 */ 8 /* div,p{ 9 display: inline; 10 } */ 11 12 13 /* 行内元素转化为块元素 */ 14 /* span{ 15 display: block; 16 40px; 17 height: 40px; 18 background-color: pink; 19 text-align: center; 20 } */ 21 22 /* 块和行内元素转行内元素 */ 23 div,a,span,strong{ 24 display: inline-block; 25 width: 200px; 26 height: 200px; 27 background-color: pink; 28 text-align: center; 29 } 30 </style> 31 </head> 32 <body> 33 <!-- /* 块元素转化为行内元素 */ --> 34 <!-- <div>两年那</div> 35 <p>努力</p> --> 36 37 <!-- /* 行内元素转化为块元素 */ --> 38 <!-- <span>练习</span> 39 <span>元素</span> --> 40 41 <!-- /* 块和行内元素转行内元素 */ --> 42 <div>今天</div> 43 <a href="#">元素</a> 44 <span>转换</span> 45 <strong>块</strong> 46 47 </body> 48 </html>
1 块元素转化为行内元素 2 div,p{ 3 display: inline; 4
块和行内元素转行内元素 div,a,span,strong{ display: inline-block; <div>今天</div> <a href="#">元素</a> <span>转换</span> <strong>块</strong>
1 行内元素转化为块元素 2 span{ 3 display: block; 4 5 6 <span>练习</span> 7 <span>元素</span>