【HTML】标签显示模式：块级元素、行内元素和行内块元素的对比以及嵌套规则

块级元素block	行内元素inline	行内块元素inline-block
独占一行	一行可放置多个	一行可放置多个，相邻的行内元素之间会有空隙
可设宽高，内外边距	不能设置宽高和上下外边距，可以设置内边距和左右外边距	可设宽高，内外边距
默认宽度是父级容器的100%	默认宽度是本身内容的宽度	默认宽度是本身内容的宽度
里边可以放置块、行内、行内块元素	里面只能容纳文本和其他行内元素	行内块元素大部分都是单标签，内部不会嵌套其他元素

嵌套规则

1. 特殊的块级元素p、h1-h6、dt只能嵌套行内和行内块元素，就算给块级元素设置display: inline 也不行，否则会将元素的前后两个标签解析成两对标签，导致样式失效。
2. 行内元素a里边不能再放a，特殊情况a里面可以放块级元素，这时给内部的块级元素设置宽高时，无法影响到父级行内元素的宽高，且父级行内元素也会受到块级元素的影响，出现独占一行的情况。相互嵌套时给a转换一下块级模式最安全。
3. 行内块元素也有像button这样的双标签，在其内部既可以嵌套行内元素也可以嵌套块级元素，如果是内嵌块级元素，则父级行内块元素的宽高会跟随内嵌块级元素的宽高变化，但不会独占一行。如果是内嵌行内元素，则没什么变化。

补充

1. 搜索框与按钮之间产生间隙的解决办法：二者分别浮动，按钮设置border: 0