Osheep

时光不回头,当下最重要。

块级元素与行内元素(内联元素)的区别和转换

当你面试web前端工程师的时候,很多面试官会问到块级元素与行内元素(内联元素)之间的区别和转换,那么问题来了。
 
大多数html元素被定义为两种:块级元素、行业元素(内联元素)
 
块级元素与行内元素(内联元素)之间的区别主要是:
 
1、块级元素可以包含行内元素,也可以包含块级元素,行内元素不能包含块级元素,块级元素在浏览器显示时通常会以新行来开始或者结束,内联元素在显示时通常不会以新行开始
 
2、块级元素可以设置宽高,内联元素在你没有将其转换成块级元素之前是无法设置它的宽高的,内联元素的宽高总是随着自身内容的增减去扩大缩小
 
注: 很多同学刚开始学习的时候是不是经常遇到这种情况,我当初刚学的时候就郁闷到了,那时候我的观念里面还没有块级元素与行内元素(内联元素)
 
3、块级元素与行内元素的属性不一样,块级元素设置margin和padding是正常的, 内联元素设置margin和padding的上下是无效的,但是可以使用(line-height)设置它的行高
 
注: 当你遇到这种情况,可以使用disply:block和display:inline-block;属性进行转换,就可以正常的设置margin和padding,但是如果你不会使用那当真是悲剧了
 
块级元素与行内元素(内联元素)之间的转换主要是:
 
行内元素转换为块级元素:display:inline-block; 元素为行内块元素。有宽高属性,但不独占一行。
 
display: block;元素有宽高属性,并且独占一行显示。
 
块级元素转换为行内元素:display:inline;
 
具体可以试试:
 

  1. <div style“display:inline “> html5前端开发分享一 </div>  
  2.     
  3. <div style“display:block “> html5前端开发分享二</div>  
  4.     
  5. <div style“display:inline-block “>html5前端开发分享三 </div>  
点赞