CSS元素显示模式

显示模式：元素（标签）以什么方式显示。

一、块级元素

显示特点：

1，独占一行（一行只显示一个）

2，宽度默认是父元素宽度，高度默认由内容撑开。

3，可以自定义宽，高，内边距，外边距。

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

代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer...

注：文字类元素不能使用块级标签，例如p、h中不能放块级元素。

二、行内元素（内联元素）

显示特点：

1，一行多个。

2，宽高默认由内容撑开。

3，不可以设置宽高，尺寸和内容大小相同。

4，行内元素只能容纳文本或其他行内元素。

代表标签：a、span、b、u、i、s、strong、ins、em、del...

三、行内块元素

显示特点：

1，一行可以显示多个，但他们之间会有空白缝隙。

2，可以设置宽高，外边距，内边距。

3，默认宽度就是它本身内容宽度（可以设置宽高）。

代表标签：input、textarea、button、select、img、td...

特殊情况：img标签有行内块元素特点，但Chrome调试工具中显示结果是inline。

四、元素显示模式转换

目的：改变元素默认显示特点，让元素符合布局要求。

语法：

属性	效果	使用频率
display:block	转换成块级元素	较多
display:inline-block	转换成行内块元素	较多
display:inline	转换成行内元素	极少

HTML嵌套规范注意点：

 1，块级元素一般作为大容器，可以嵌套文本，块级元素，行内元素，行内块元素等等，但是，p标签（段落文字）不要嵌套div、h、p等块级元素。

2，a标签内部可以嵌套任意元素，但是a标签不能嵌套a标签。