元素类型解释

05-元素类型

常见元素类型有：块级元素、行内元素、行内块元素 。

（这里所说的元素，就是指标签）

1. 块级元素

块级元素独占一行，不和其他元素并排；

可以设置宽高和上下外边距；

不设置宽度时默认宽度100%；

可以容纳其他块元素和内联元素；

常见的块级元素*：div h1~h6 p ul ol li dl dt dd*，以及后面会学习的table form等。

2. 行内元素

不霸占位置，可以和其他行内元素或文字内容并排；

不支持设置宽高，默认宽高为0，内容撑开宽高；

只能容纳文本和其他内联元素；

不能设置上下外边距；

常见的内联元素：a span b i strong em del等。

3. 行内块元素

可以通过 display 属性对元素进行类型转换：

• display:none; /* 元素不显示 */

• display:block; /* 元素以块级形式展示 */

• display:inline; /* 元素以行内形式展示 */

• display:inline-block; /* 元素以行内形式排列，以块级形式展示 */

inline-block（行内块元素）的特点：

块级元素转换后宽高默认为0，且能够水平排放

行内元素转换后支持宽高和上下margin

行内块元素和行内元素或者文字 之前的空格和换行会被解析成一个空格字符（通过设置父级字体大小解决，或者直接删除代码中的间隙内容）

不支持margin的auto属性

IE6 7不支持

另外，img input 等元素属于inline元素，但是拥有inlin-block的特性。

√. 作业与练习

• 用行内块实现横向导航
• 天猫产品列表
• 美食新闻图文布局