引言

最开始做开发时，碰到前端样式，非常害怕，因为调试时间成本太大了。主要是因为没有系统的把前端知识点学习一遍，只是了解 display:none，display: inline 及 display:block的用法与意义，并没有认真的把它们的差异找出来。

刚好今天有人问到它们的区别，索性写篇小结，来帮助大家理解，以便加深记忆。

display: inline

• 1）作用：

• 使元素成为行内元素

• 2）特点：

• 也叫内联元素，和其他元素都在一行上；

• 高，行高及顶和底边距不可改变；

• 宽度就是它的文字或图片的宽度，不可改变。

• 3）应用标签

span、font、em、b 等

• 4）举例

<style>

ul li{

display: inline;

color:blue;

}

</style>

<ul>

<li>问答</li>

<li>头条</li>

<li>关注</li>

<li>资深IT老张</li>

</ul>

• 5）运行效果

display: block

• 1）作用：

• 使元素成为块级元素

• 2）特点：

• 块级元素，可以控制宽和高、margin及border等；

• 并且会换行。

• 3）应用标签

div、p、ul、li 等

• 4）举例

<ul>

<li>问答</li>

<li>头条</li>

<li>关注</li>

<li>资深IT老张</li>

</ul>

• 5）运行效果

display: inline-block

• 1）作用：

• 使元素保留行业元素布局，同时拥有块级元素的css属性（如width，height）

• 2）特点：

• 是使元素以块级元素的形式呈现在行内。

• 即，让这个元素显示在同一行不换行，

• 但是又可以控制高度和宽度，

• 这相当于内联元素的增强。

• 3）应用标签

input、img 等

• 4）举例

<style>

ul li{

display: inline-block;

color:white;

width: 150px;

height:40px;

background:black;

text-align:center;

margin-top:10px;

padding-top:8px;

font-weight:bold;

font-size:25px;

cursor:pointer;

}

</style>

<ul>

<li>问答</li>

<li>头条</li>

<li>关注</li>

<li>资深IT老张</li>

</ul>

• 5）运行效果

• 6）注意

在各浏览器上兼容性差，可能要写hack

对比的区别

display:inline的小结

display:block的小结

display:inline-block 的小结

其它用法

如果在你的项目中，并没有引用 JQUERY时，以下2种用法，你可能会需要：

display:none 为控制元素隐藏；

display:inline 为控制行级元素显示；

小结

本文主要讲述了web前端开发中 display:inline、display:block、display:inline-block 三者之间的特点及区别，以及分别的应用场景。

希望能帮到你或其他的小伙伴，谢谢。

（结束）

【资深IT老张】乐意为您提供 IT 技术方面的咨询服务。