块元素与行内元素(内联元素)

块元素与行内元素(内联元素)

 

HTML5出现之前,经常把元素安装块级元素和内联元素来区分.在HTML5中,元素不再按照这种方式来区分,而是按照内容模型来区分,分为元数据型(metadata content),区块型(sectioning content),标题型(heading content),文档流型(flow content),语句型(phrasing content),内嵌型(embedded content),交互型(interactive content).元素不属于任何一个类别,被称为穿透的,元素可能属于不止一个类别,称为混合的.

虽然到了HTML5的版本,元素分类更细致了,但这对初学者不友好,所以我们仍然按照块元素和内联元素做区分,这对我们的布局起到了至关重要的作用.

内联元素和块级元素的区别

块级元素	内联元素
块元素会在页面中独占一行(自上向下垂直排列)	行内元素不会独占页面中的一行,只占自身的大小
可以设置width,height属性	行内元素设置width,height属性无效
一般块级元素可以包含行内元素和其他块级元素	一般内联元素包含内联元素不包含块级元素

常见块级元素

div,form,h1~h6,hr,p,table,ul,等

常见内联元素

a,b,em,i.span,strong等

行内块级元素(特点:不换行,能够识别宽高)

button,img,input等