元素显示模式：块级，行内，行内块，嵌套规范，显示模式转换

Chrome调试模式下有Computed可以查看元素的显示模式。

1.块级元素（可独块）block

• 独占一行

• 宽度：父元素宽度（默认）

• 高度：由内容撑开（默认）

• 可设置宽高

eg:

hx（x=1~6），div , p , ul li , dl dt dd , form , header ,  nav ,  footer

2.行内元素（不可多行）inline

• 一行显多个，不换行

• 宽度由内容撑开

• 不可设宽高

• （水平方向）padding和margin可以设置

eg：

a ， span ，b ， u ， i ， s ， strong ， ins ， em ，del

3.行内块元素（可多行内块）inline-block

• 一行多个(中间存在间隙)

• 可设宽高

eg：

input ， textarea  ， button  ，select

img有行内块元素特点，但是Chrome显示为inline

HTML嵌套规范：

块级元素：大容器，可以嵌套：文本，块级，行内，行内块元素

但p不能嵌套div,p,h

行内元素：可以嵌套：文本，行内元素

a标签内部可以嵌套任意元素，除了自己

元素显示模式转换

块->行内：display: inline;

行内->块：display：block;   (常用)

块，行内元素->行内块：display：inline-block;   (常用)