其他分享
首页 > 其他分享> > 行块属性

行块属性

作者:互联网

块属性: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>

 

标签:行块,标签,height,width,background,display,属性
来源: https://www.cnblogs.com/Wang12138/p/15529586.html