块状元素和内联元素的区别

内联元素、块状元素、内联块的转换：

• 内联元素->块状元素：display:block;
• 块状元素->内联元素：display:inline;
• 元素->内联块状元素：display:inline-block;

块状元素（div、ul、ol、dl、li、p、h1~h6、table、form等）：

• 独占一行；
• 支持所有样式；
• 不设置宽度时宽度为父元素宽度；
• 换行符不解析。

内联元素（span、a、strong、em、i、input、img等）：

• 可以在一行显示；
• 不支持宽高，上下margin和padding等样式会有问题；
• 宽度由内容撑开；
• 换行符会被解析（不同浏览器下宽度不一样）。