<

div>

对于前端知识我一直没有体系化的掌握，所了解的都是一些零星散散的知识点，遇到问题半天才能解决，所以打算进行系统的学习一遍，基础的东西都是一劳永逸，这是重学前端系列的第一篇文章，关于块级元素与内联元素的区别。

块级元素

块级元素的特点

1. 块级元素独占一行
2. 可设置元素的宽度、高度、行高、外边距、内边距
3. 块级元素占据其父元素（容器）的整个空间
4. 可以容纳内联元素和其他块元素

常见块级元素有：

~







内联元素
内联元素的特点
line-height

常内联元素元素：












 注意：内联元素可设置水平方向的 margin 但垂直方向不可以设置， padding 水平和垂直可以设置 
内联块级元素
内联块级元素是鉴于块级元素和内联元素之间的一种元素，它的特点是：

和其他元素都在一行上；
元素的高度、宽度、外边距、内边距都可设置；

内联块级元素有：
  
三种元素可以通过设置css互相转换
display:inline;   /*内联*/
display:inline-block;  /*内联块级*/
display:block;   /* 块级 */
为了加深印象请自行验证，网上资料很多都已经过时了。
看个例子：
右边是图片

span 和 img 都是内联元素，所以他们都挤在一行，为了美观，可以让图片单独一行，你只要给 img 标签的 display 属性设置为 block 就可以。
 
img {
    margin: 0 auto;
    display: block;
    width: 30px;
}
 
图片另一起了一行
--- EOF ---

  任何问题可以扫描二维码给我留言

关注公众号「Python之禅」，回复「1024」免费获取Python资源
  

																		
						

						
											
						
					
					
Related Posts
								

																		
										
										

											
python 天气预报获取
										
									
																	

																								

																		
										
										

											
高德深度信息接入的平台化演进
										
									
																	

																								

																		
										
										

											
HBase重磅 | ApsaraDB HBase数据存储与分析平台概览
										
									
																	

																
								
								  
																
								

									
About The Author
																		
shine
									

								
								
								  
								

									
						
									
				
				
				

	
2024年五月
	

	

		
M
		
T
		
W
		
T
		
F
		
S
		
S
	
	

	

	

		
« Jan
		
 
		
 
	
	

	

	

		
 
1
2
3
4
5
	
	

		
6
7
8
9
10
11
12
	
	

		
13
14
15
16
17
18
19
	
	

		
20
21
22
23
24
25
26
	
	

		
27
28
29
30
31