WithCoderWithCoderWithCoder

HTML块元素和行内元素

从概念上来说,块级元素,一般都是从新行开始,它可以容纳行内元素和其他块元素,常见块级元素比如div/p等。行内元素,也叫做内联元素,一般都是语义级别的基本元素,内联元素一般只能容纳文本或者其他内联元素。内联元素的显示,为了帮助理解,可以形象的称为“文本模式”,即一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。行内元素,最常使用的是span。

块元素和行内元素的区别:

1. 块级元素会独占一行,其宽度自动填满其父元素宽度。块级元素却总是会在新的一行开始排列,各个块级元素独占一行,垂直向下排列,若想使其水平方向排序,可使用左右浮动(float:left/right)让其水平方向排列。

2. 行内元素不会独占一行,相邻的行内元素会排列到同一行里,直到一行排不下,才会换行,其宽度随元素的内容变化而变化。

3. 一般情况下,块级元素可以设置width,height属性,并且宽度高度以及外边距,内填充都可随意控制;行内元素设置width,height无效,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效(注意,块级元素设置了width宽度属性后仍然是独占一行的)。        

4. 块级元素可以包含行内元素和块级元素,还可以容纳内联元素和其他元素;行内元素不能包含块级元素,只能容纳文本或者其他行内元素。

块元素和行内元素的联系:

但是,当加入了css控制以后,块元素和内联元素的这种属性差异就不成为差异了。

比如,我们完全可以把内联元素加上display:block这样的属性,让它也有每次都从新行开始的属性;而对于块元素,我们同样可以把块元素加上display:inline这样的属性,让它也在一行上排列。

行内块元素综合了行内元素和块状元素的特性,但是各有取舍。因此行内块状元素在日常的使用中,由于其特性,使用的次数也比较多。行内块元素不自动换行,能够识别宽高,它的默认排列方式为从左到右。

欢迎分享交流,转载请注明出处:WithCoder » HTML块元素和行内元素