元素之间得转化

元素之间的转换：
◆块元素转行内元素
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             width: 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>

猜你喜欢