欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

浅谈block, inline和inline-block的区别

程序员文章站 2022-05-03 09:36:36
block 块元素 inline 内联元素 常见的块元素有：div, p, h1~h6, table, form, ol, ul等 常见的内联元素有：span, a, strong, em, label, input, select, textarea, img, br等 display:block ......

block 块元素    inline 内联元素

常见的块元素有：div, p, h1~h6, table, form, ol, ul等

常见的内联元素有：span, a, strong, em, label, input, select, textarea, img, br等

display:block特点

1、独占一行，多个block元素另起一行，默认情况下，block元素宽度自动填满其父元素宽度

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div style="width:200px;">
 9         <div>div块元素</div>
10         <p>p块元素</p>
11         <h1>h1块元素</h1>
12         <table border="1">
13           <tr>
14             <th>表头</th>
15             <th>表头</th>
16           </tr>
17           <tr>
18             <td>表格单元</td>
19             <td>表格单元</td>
20           </tr>
21         </table>
22         <form>
23             First name:<input type="text" name="firstname" value="Mickey">
24             <br>
25             Last name:<input type="text" name="lastname" value="Mouse">
26         </form> 
27         <ol>
28           <li>Coffee</li>
29           <li>Tea</li>
30           <li>Milk</li>
31         </ol>
32     </div>
33 </body>
34 </html>
35 
36 效果如下：
浅谈block, inline和inline-block的区别
可以轻松的发现这些元素都是独占一行，通过审查元素我们可以看到这些标签的display属性都是block，当前父级元素的width是200px,当改变父级元素宽度为70px时，效果如下： 




浅谈block, inline和inline-block的区别所以默认情况下，block元素宽度自动填满其父元素宽度




2、block元素可以设置width,height属性。块元素即使设置了宽度,仍然是独占一行。


3、block元素可以设置margin和padding属性。


display:inline特点


1、inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化


2、inline元素设置width,height属性无效。


3、inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <span>span内联元素</span>
 9     <strong style="width:10px">strong内联元素</strong>
10     <em>em内联元素</em>
11     <label>label内联元素</label>
12     <input type="text" value="input内联元素">
13     <div style="width:10px">div块元素</div>
14 </body>
15 </html>




效果图如下：


浅谈block, inline和inline-block的区别


可以看出对inline元素设置宽度不起作用，它的宽度是随着内容的长度变化的


display:inline-block特点


简单的说，就是将对象呈现为inline对象，让block元素不再独占一行，多个block元素可以同排一行，且元素具有block的属性，可设置宽高，是block和inline元素的综合体。


 


 


 




 


 


 


 
					

																				

						

							上一篇：							
								shell脚本中cd命令无效							
						

						

							下一篇：							
								LVS调度算法							
						

					

															

						

							推荐阅读