1、概念对比
- 块元素:所谓的块元素就是独占一行的元素,即使它再窄(占用的范围),内容再少,也会独占一行。
- 行内元素(内联元素):只占用本身大小的元素,不会占用一行。内容越多,占用的范围越宽。如果有三个行内元素的占用的宽度加在一起不到一行的宽度,那么他们是可以排列在一行内,不用换行。
2、行内元素举例
<!--行内元素-->
<em>床</em> <strong>前</strong> <a href="#">明月</a><em>光</em>
效果如下:
可以看见这一行文字里面用到了两个 em标签,一个strong标签,一个a标签。由于他们都是行内元素,所以是可以在一行内排列的。
3、块级元素举例
<!--块级元素-->
<p>块级元素演示</p><a href="#">这是一个行内元素a标签</a>
效果如下:
可以看见p标签是一个块级元素,本身所包含的内容并没有达到一行的宽度,但是它后面的 a标签 就是不能排在它的后面。只能乖乖的排在它的下面一行去了。这就是块元素。
4、常见的行内元素与块元素
- 行内元素:a 、em、strong、img、font、iframe、span
- 块元素:p、div、(h1 ~ h6)、br(换行)、hr(水平线)
5、注意事项
注意:
1、 div是一个纯粹的块元素,没有任何的语义,也就是说,它不像 h1 标签,h1标签是一级标题,h1有默认的样式,比如 h1 的字体大小,颜色,字体加粗了等等。但是div 就没有这些默认的样式。2、span标签也是一样的,也是没有任何的语义,span标签是专门用来选中文字,为文字设置样式的。
注意:
1、a元素(也就是 a 标签)可以包含任意元素,除了它本身。
2、p元素中不能包含任何的块元素。
3、块元素主要用于做页面的布局,而内联元素主要用来为文本设置样式,一般会用块元素去包含内联元素,而不会用内联元素去包含块元素。