我们知道判断行内元素和块级元素的快捷方法就是判断是否能并列,下面我们就块级元素和行内元素做个分类,并看一下具体区别:
大多数 HTML 元素被定义为块级元素或内联元素。“块级元素”译为 block level element,“内联元素”译为 inline element。
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化。
1.块级元素
块级元素: 在浏览器显示时,通常会以新行来开始(和结束)。块级元素按照其应用于结构还是内容分为三种:结构化块状元素,终端块状元素,多目标块状元素。
结构化块状元素: 这类元素用于构造文档的结构,没有语义上的含义,仅仅划分出了文档的组织方式,并没有体现文档的内容。
终端块状元素: 这类元素用于从结构转向内容,拥有语义上的含义,能够表明内容的性质。终端块状元素属于结构的终点,它们不能再包含其他块级元素,只能包含文本或行级元素。
多目标块状元素: 多目标指的是可以自由的扩展或嵌套文档的结构,以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵,以终端的形式使用就含有语义的内涵。
2、行内元素
内联元素 (inline element)或称为行内元素 一般都是基于语义级(semantic)的基本元素,只能容纳文本或者其它内联元素。
注:这里input元素比较特殊,它属于行内块级元素。
3.块级元素与行内元素的区别
(1)块级元素会独占一行,其宽度自动填满其父元素宽度;
行内元素不会独占一行,相邻的行内元素会排列在同一行,直至一行排不下才会换行,其宽度随元素的内容而变化。
(2)块级元素可以包含行内元素和块级元素;行内元素不能包含块级元素。
(3)行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效。
4. 块级元素与行内元素的转换
display:inline-block;
display:inline;
display:block;
5.可变元素
可变元素为根据上下文语境决定该元素为块元素或内联元素: