块属性：div,p,ul,ol,li,h1-h6等
特点：1.可以设置宽高
2.不可以与别人共处一行
3.不设置宽度的情况下，宽度为100%
行内属性：span，a
特点：1.不可以设置宽高
2.可以与别人共处一行
3.其宽高由内容撑开
行内块属性： 默认 display:inline-block; 如img，input
特点：1.可以设置宽高
2.可以与别人共处一行
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 div{
8 width:300px;
9 height: 300px;
10 background: lightblue;
11 display: inline-block;
12 }
13 span{
14 width: 300px;
15 height: 300px;
16 background: lightgreen;
17 display: inline-block;
18 }
19 input{
20 width: 300px;
21 height: 30px;
22 }
23 </style>
24 </head>
25 <body>
26 <div>我是div</div>
27 <div>我是div</div>
28 <span>我是span</span>
29 <span>我是span</span>
30 <input type="" name="">
31 <input type="" name="">
32 </body>
33 </html>
p标签是块标签，可以设置高度和宽度
a标签是行标签，如果设置高度和宽度则没有效果，其区域的大小则由内容撑开
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title></title>
7 <style type="text/css">
8 .p1{
9 background-color:yellow ;
10 width :430px;
11 height :260px;
12 /*将块属性标签改为行属性标签*/
13 /*用来更改元素的特性,可以将行属性标签改为块属性标签,也可以反过来使用*/
14 }
15 .a1{
16 background-color:red ;
17 /*行属性标签的区域大小只能由内容来模开*/
18 width :430px;
19 height :260px;
20
21 }
22
23 </style>
24 </head>
25 <body>
26
27 <p class="p1">块属性标签</p>
28 <a href="" class="a1">行属性标签</a>
29 </body>
30 </html>
将p标签内添加属性display: inline;则块标签转化为行标签
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title></title>
7 <style type="text/css">
8 .p1{
9 background-color:yellow ;
10 width :430px;
11 height :260px;
12 /*将块属性标签改为行属性标签*/
13 /*用来更改元素的特性,可以将行属性标签改为块属性标签,也可以反过来使用*/
14 display: inline;
15 }
16 .a1{
17 background-color:red ;
18 /*行属性标签的区域大小只能由内容来模开*/
19 width :430px;
20 height :260px;
21
22 }
23
24 </style>
25 </head>
26 <body>
27
28 <p class="p1">块属性标签</p>
29 <a href="" class="a1">行属性标签</a>
30 </body>
31 </html>