块级元素与内联元素

块级元素(block-level)

         常见的块元素有<h1>~<h5>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>是最典型的块元素

特点:

1、独占一行

2、高度、宽度、内边距、外边距、边框都有效

3、宽度默认是父元素宽度的100%

4、是一个盒子及容器,里面可以放行内元素或者块级元素

注意:

1、只有文字才能组成段落,因此p标签里不能放块级元素,特别是p标签不能放div

2、同理还有这些标签h1~h6,dt(自定义列表dl的下级描述标签),他们都是文字类块级元素标签,里面不能放其他块级元素

3、除了以上特殊标签,其他都没问题

行内元素(inline-level)

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素。有的地方也成内联元素

特点:

1、相邻行内元素在一行上,一行可以显示多个。

2、高、宽是无效的

3、边框上下左右都有效,但不会影响布局

4、外边距左右有效,上下无效

5、内边距上下左右都有效,但是不会影响布局

6、大小默认被内容撑开

7、行内元素只能容纳文本或其他行内元素

注意:

1、链接里面不能再放链接

2、特殊情况a里面可以放块级元素或其他行内元素,但是给a转换一下块级元素最安全

行内块元素(inline-block)

在行内元素中有几个特殊的标签<img>、<input>、<td>可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素

特点:

1、和相邻行内元素(行内块)在一行上,但是之间会有空白间隙(除非代码中的两个元素中间没有任何空白),一行可以显示多个

2、大小默认被内容撑开

3、高度、行高,内外边距边框都有效

原文地址:https://www.cnblogs.com/webpon/p/13445143.html