HTML元素类型

1.块级元素

块级元素具有以下特点：

• 独占一行
• 不设置宽度样式时，宽度自动撑满父元素宽度
• 和相邻的块级元素一次垂直排列。
• 可以设定元素的宽度和高度以及四个方向的内、外边距

常见的块级元素有div、p、h1~h6、ul、ol、dd以及HTML中的新增元素section、header、footer、nav等元素

2.行内元素

行内元素也称为内联元素或内嵌元素。行内元素有如下特点：

• 行内元素不会独占一行
• 不可以设置宽度和高度
• 可以设置4个方向的内边距以及左、右方向的外边距，但不可以设置上、下方向的外边距
• 行内元素的高度由元素高度决定，宽度由内容的长度控制，即宽、高由内容撑开

行内元素一般不可以包含块级元素，常见的行内元素有span、a、em、strong以及HTML5新增的mark、time等元素

3.inline-block行内块元素

行内块元素可以理解为是块元素和内嵌元素inline的结合体，它同时具有block和inline的一些特性：

• 和相邻的行内元素以及行内块元素从左到右依次排列在同一行，直到一行排不下才会换行。
  注意：和行内元素一样，源代码中，行内块元素换行会被解析成空格(这句话的意思就是，当你写html代码的时候，如果两个行内元素对应的代码不在同一行，那浏览器显示的页面上这两个行内元素之间就会有一个空格，而如果在同一行的话，就会实现无缝衔接，前提是左右的内、外边距为0)
• 可以设置宽度和高度
• 可以设置4个方向的内、外边距
  常见的行内块元素有input和img(img在规范中为行内元素，但在表现行为上却是行内块元素）

行内块元素的主要问题有以下两点：

• 一是存在浏览器兼容问题，在低版本浏览器下inline-block会失效，解决方案是：给元素添加display:inline;zoom:1;处理
• 二是inline-block元素默认下方会有空隙，解决方案是：给行内块元素设置vertical-align:middle|top|bottom;(三个属性值任意一个都可以)

4.使用display改变元素类型

display属性规定元素应该生成盒子的类型，通过display可以将block块级元素、inline行内元素和inline-block行内元素相互转化，改变元素的显示方式。常用的display属性的取值情况如下表所示：

属性值	描述
none	元素不被显示(隐藏)
block	元素显示为块级元素
inline	元素显示为行内元素
inline-block	元素显示为行内块级元素
inherit	继承父级元素的display属性