块级元素(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、高度、行高,内外边距边框都有效