CSS3：元素显示模式

---

前言

复习前端知识，今天复习元素显示模式。

一、元素显示模式是什么？

网页的标签非常多，在不同的地方会用到不同类型的标签，而显示模式则是根据标签的特点一般对标签分为两大类：块元素和行内元素。

二、元素显示模式的几大类

1.块元素

常见的块元素：< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >，比较重点的是

标签是 典型的块元素

块级元素的主要特点

1. 独占一行，同一行上不能与其他元素共存
2. 高度、宽度、外边距以及内边距都可以控制
3. 宽度默认是容器（父级宽度）的100%
4. 是一个容器及盒子，里面可以放行内或者块级元素

注意事项

1. 文字类的元素内不能使用块级元素
2. < p >标签主要用于存放文字，因此< p >里面不能放块级元素，特别是不能放< div >
3. 同理，< h1 >~< h6 >里面也不能放其他的块级元素

2.行内元素

常见的行内元素：< a>、< strong >、< b >、< em > 、< i >、< del >、< s >、< ins >、< u >、< span >，其中< span >是最典型的行内元素

行内元素的主要特点

1. 相邻行内元素在一行上，一行可以显示多个
2. 高、宽直接设置是无效的
3. 默认宽度就是其本身的宽度
4. 行内元素只能容纳文本或其他的行内元素

3.行内块元素

常见的行内块元素：< img/>、< input/>、< td>，它们同时具有块元素和行内元素的特点，部分资料称其为行内块元素。

行内元素的主要特点

1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个
2. 默认宽度是其本身内容的宽度
3. 高度、行高、外边距以及内边距的偶可以进行控制
4. 行内元素只能容纳文本或其他的行内元素

简单的说，就是同时具有块元素和行内元素的共同特点。

总结

复习CSS，项目冲冲冲！