笔者做web前端已经做了很长时间了,常用的display属性就是inline、block和inline-block,对于他们的特性和区别有一个大概的了解,但是并不全面。今天笔者写这篇文章再来重新认识一下这三者和这三者之间的区别,再对平常使用过程中常常碰到的问题做个回顾和总结。
特性
inline:
- 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行
- 不能更改元素的height,width的值,大小由内容撑开
- 可以使用padding,margin的left和right产生边距效果,但是top和bottom就不行
block:
- 使元素变成块级元素,独占一行,在不设置自己的宽度的情况下,块级元素会默认填满父级元素的宽度
- 能够改变元素的height,width的值
- 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果
inline-block:
用通俗的话讲,inline-block就是不独占一行的块级元素
- 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行
- 能够改变元素的height,width的值
- 可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果
常见问题
1,如何将内联元素变成块元素
-
第一种:直接修改display为 block
将内联元素的display属性设置为block之后,内联元素就会以块级元素的方式进行展示。独占一行,可以设置宽高等… -
第二种:对inline元素设置float
如下图,当我们将world标签设置float: right时,它的width和height设置就都起作用了
-
第三种:对inline元素设置position:absolute/fixed
既然设置float能够使inline元素变为block,那position:absolute/fixed是否也可以呢,答案是肯定的
-
第四种:对inline元素的父元素设置display: flex
我发现,当我们设置inline元素的父元素为flex时,此时inline元素也可以设置宽高了。(关于flex的详细介绍,可以看笔者的另外一篇文章:css —— Flex布局详解)
2,inline-block布局 vs 浮动布局,怎么选择
相同点:
- 能够达成一致的逐行排列的效果
不同点:
通过上图的对比发现,虽然他们都是逐行排列,排不下了自动换行,但是区别也是很明显的
- float会使得父元素高度坍塌,需要将父元素设置overflow:hidden闭合浮动
- 从图中可以看出,float元素会尽量往上靠,而inline-block元素会尽量往左靠
- inline-block元素之间会差生小的空隙,而float元素是没有的。这个缝隙是如何产生的以及如何消除,我们看下个问题。
综上,如果是需要逐行从行头开始排列元素,就使用inline-block,如果需要文字环绕的效果就是用float。
3,inline-block产生的缝隙问题
缝隙产生原因:
这个问题产生的原因是换行引起的,因为我们写标签时通常会在标签结束符后顺手打个回车,在下面一行继续写标签,而回车会产生回车符,回车符相当于空白符。如下图所示:
消除缝隙:
- 既然缝隙是回车产生的,那么我们只要将所有的span标签都写在一行,问题自然就解决了,但是在编辑器上,一行过长,编辑起来就十分的不方便
- 我们将父元素的font-size设置为0,然后再将span的font-size设置成我们需要的值,这样空白地方就消失了,如下:
贴出以上示例的代码,供大家尝试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change-to-flex</title>
<style>
body {
margin: 0;
}
.border {
margin: 60px;
width: 200px;
border: 2px solid blue;
font-size: 0;
}
.item {
border: 1px solid green;
display: inline-block;
font-size: 14px;
}
</style>
</head>
<body>
<div class="border">
<span class="item">hello</span> <span class="item" style="height:40px;">world</span>
<span class="item">,</span>
<span class="item">jia</span>
<span class="item">you</span>
<span class="item">wuhan</span>
</div>
</body>
</html>
—————————————————————————
参考文章:
CSS—display详解(作者:墨VS雪)