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标签主要用来套文字。

扫描二维码关注公众号，回复： 1758571 查看本文章

                   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的问题：

                              下图中的artical 和aside就是 两个inline-block内联级标签。

问题：1）、存在两个 inline-block框对不齐的问题；

2）、存在两个 inline-block框之间有 间隙的的问题

解决办法：1）、设置盒子的 对齐基线(这个是两个盒子要同时设置基线)

middle:将基线设置到盒子的中部；

bottom:将基线设置到盒子底部;

top:所有元素按照本行高度最低的元素的底部对齐；

vertical-align:属性在应用时候必须给一行要对齐的元素同时设置;

2）、 inline-block两个内联级标签，解决两个框之间的间隙，

是需要设置他两个的父级的font-size:0px

如果这两个框里面有文字，那就得恢复它的字体，需要在这两个框设置字体大小。

四.三大类标签在水平方向居中时

     遵循以下原则

block块，width确定的时候，为其自身设置margin：0 auto;(只是属于block元素可以设置这个属性)

inline,inline-block,文字为其父级设置text-align:center;