一、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的问题:
![](https://i-blog.csdnimg.cn/blog_migrate/b5dacbd09c7ea7f382aa84024aac26b3.png)