2.标签的根据display属性分基本三种：block,inline,inline-block;

一、display：block块级标签

布局特性：1.独占一行

               2.不设置宽度时，宽度方向就是父级内容区域的宽度。

               3.支持所有的css样式设置。

               4.布局时，主要是用来将内容从上到下排列的。

               5.block块作为子级的特点：当父级的宽高确定后，子级设置margin和padding只会将子级块内容向里面挤，不会影响父级

块的大小。

二、display：inline 内嵌级标签

    布局特性：1.可以同行排列，

                   2.不支持宽高设置，大小由内部的文字撑开；不支持上下的margin设置，支持左右的margin设置；支持padding设置。

                   3.内部的子级一般就是文字或者inline型标签，项目中inline标签主要用来套文字。

                   4.浏览器会解析文档中两个inline标签之间的空白符为间隙。该间隙在不同的浏览器上的大小不一致。

                    <div >
                         <span>我的</span>
                        <span>你的</span>

                </div>

                    输出结果：我的 你的

                       （因为这个span和span不在一行，没挨着，所以会导致浏览器将这个空格解析成间隙，输出结果中间有个间隙）

                消除间隙的解决办法：

                        给父级加上font-size:0;子级如果有文字的话，需要恢复文字的大小，需要给inline标签里的文字设置大小。

                     <div style="font-size: 0">
                         <span style="font-size: 15px;">我的</span>
                         <span style="font-size: 15px;">你的</span>

                </div>

三、display：inline-block 内联级元素

布局特性：1.同行排列

               2.可以设置任意的css样式

               3.在不设置宽高大小时，由内容撑开盒子的大小，其内容可以是任意盒子或文字。

               4.垂直方向上，所有的内联级元素默认情况下都是按照其内部最后一行文字对齐的，为了保持一致性，需要给该行每个内联级元素设置vertical-align属性保证垂直方向文字的对齐。

详细描述4的问题：