行块属性
块属性：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>
