8、HTML:行内元素(内联元素)与块元素
1、概念对比 块元素:所谓的块元素就是 独占一行 的元素,即使它再窄(占用的范围), 内容再少 ,也会 独占一行 。 行内元素(内联元素):只占用 本身大小 的元素, 不会占用一行 。内容越多,占用的范围越宽。如果有三个行内元素的占用的宽度加在一起不到一行的宽度,那么他们是可以排列在一行内,不用换行。 2、行内元素举例 < ! -- 行内元素 -- > < em > 床 < / em > & nbsp ; < strong > 前 < / strong > & nbsp ; < 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)