CSS元素显示模式（display）

一、什么是元素显示模式？

在 HTML 中，每个元素都有自己的显示方式，这种显示方式决定了：

元素如何排列
元素占据空间大小
是否可以设置宽度和高度
是否会独占一行

CSS 中通过 display 属性 来控制元素的显示模式。

语法：

复制代码

选择器 {
    display: 属性值;
}

例如：

复制代码

div {
    display: inline;
}

表示让 div 元素变成行内元素。

常见的元素显示模式：

显示模式	英文	特点
块级元素	block	独占一行，可以设置宽高
行内元素	inline	一行显示，不能设置宽高
行内块元素	inline-block	一行显示，可以设置宽高

二、块级元素（block）

1. 什么是块级元素？

块级元素最大的特点：

独占一整行，宽度默认占满父元素，可以设置宽度和高度。

例如：

复制代码

<div>我是div</div>
<p>我是段落</p>
<h1>我是标题</h1>

效果：

复制代码

----------------
我是div
----------------
我是段落
----------------
我是标题
----------------

每个元素都会换行。

2. 常见块级元素

常见的块级元素：

复制代码

<div></div>

<p></p>

<h1></h1>

<ul></ul>

<ol></ol>

<li></li>

<form></form>

<table></table>

3. 块级元素特点

（1）独占一行

例如：

复制代码

<div>盒子1</div>
<div>盒子2</div>

显示：

复制代码

盒子1

盒子2

两个 div 自动换行。

（2）可以设置宽高

复制代码

div {

    width:300px;

    height:100px;

}

有效：

复制代码

+----------------+
|                |
|      div       |
|                |
+----------------+

（3）可以设置内外边距

例如：

复制代码

div {

    margin:20px;

    padding:30px;

}

有效。

三、行内元素（inline）

1. 什么是行内元素？

行内元素：

不会独占一行，只占自身内容大小。

例如：

复制代码

<span>hello</span>

<span>world</span>

显示：

复制代码

hello world

两个 span 会在同一行。

2. 常见行内元素

复制代码

<a></a>

<span></span>

<strong></strong>

<em></em>

<i></i>

<b></b>

3. 行内元素特点

（1）不会独占一行

例如：

复制代码

<a href="#">百度</a>

<a href="#">谷歌</a>

显示：

复制代码

百度 谷歌

（2）不能设置宽度和高度

例如：

复制代码

span {

    width:200px;

    height:100px;

}

不会生效。

原因：

行内元素的大小由内容撑开。

（3）只能设置水平方向的 margin 和 padding

例如：

复制代码

span {

    margin-left:20px;

}

有效。

但是：

复制代码

span {

    margin-top:50px;

}

效果不明显。

四、行内块元素（inline-block）

1. 什么是行内块元素？

行内块元素：

同时具有行内元素和块级元素的特点。

特点：

可以和其他元素在一行显示
可以设置宽度和高度

例如：

复制代码

<img src="1.jpg">

<img src="2.jpg">

图片默认就是行内块元素。

显示：

复制代码

图片1 图片2

2. 行内块元素特点

（1）可以设置宽高

复制代码

img {

    width:200px;

    height:200px;

}

有效。

（2）不会独占一行

复制代码

<div class="box"></div>

<div class="box"></div>

CSS：

复制代码

.box {

    display:inline-block;

    width:100px;

    height:100px;

}

效果：

复制代码

+----+ +----+
|盒1| |盒2|
+----+ +----+

五、三种显示模式对比

特点	block块级	inline行内	inline-block行内块
独占一行	√	×	×
设置宽度	√	×	√
设置高度	√	×	√
设置margin	全部有效	左右有效	全部有效
常见元素	div,p	span,a	img,input

六、display属性改变元素显示模式

CSS 中可以使用：

复制代码

display

改变元素类型。

例如：

1. div变成行内元素

HTML：

复制代码

<div>
我是div
</div>

CSS：

复制代码

div{

    display:inline;

}

效果：

div 不再独占一行。

2. span变成块级元素

HTML：

复制代码

<span>
我是span
</span>

CSS：

复制代码

span{

    display:block;

}

效果：

span 可以设置宽高，并且独占一行。

3. 转换成行内块

复制代码

div{

    display:inline-block;

}

效果：

div 可以像图片一样排列。

七、display:none隐藏元素

display:none 可以隐藏元素。

例如：

复制代码

.box{

    display:none;

}

效果：

元素消失，并且不占空间。

例如：

复制代码

<div>
盒子1
</div>

<div class="hide">
盒子2
</div>

<div>
盒子3
</div>

CSS：

复制代码

.hide{

display:none;

}

显示：

复制代码

盒子1

盒子3

盒子2不存在。

八、display:none 和 visibility:hidden区别

display:none

特点：

元素隐藏
不占位置

例如：

复制代码

盒子1

(消失)

盒子3

visibility:hidden

特点：

元素隐藏
仍然占据空间

CSS：

复制代码

.box{

visibility:hidden;

}

效果：

复制代码

盒子1

空白区域

盒子3

九、实际开发中的应用

1. 导航栏

HTML：

复制代码

<a>首页</a>

<a>新闻</a>

<a>关于</a>

默认：

复制代码

首页
新闻
关于

转换：

复制代码

a{

display:inline-block;

width:100px;

height:40px;

}

效果：

复制代码

首页   新闻   关于

2. 图片排列

复制代码

img{

display:inline-block;

width:200px;

height:150px;

}

多个图片可以横向排列。

3. 块级盒子居中

复制代码

div{

width:300px;

margin:auto;

}

前提：

必须是块级元素。

十、为什么需要学习元素显示模式？

网页布局本质就是：

使用不同显示模式控制元素的位置和大小。

例如：

网页顶部导航：

复制代码

logo     首页   产品   联系

需要：

复制代码

inline-block

网页主体：

复制代码

文章内容

需要：

复制代码

block

文字中的链接：

复制代码

点击这里

需要：

复制代码

inline

十一、总结

CSS 三大元素显示模式：

1. 块级元素 block

特点：

独占一行
可以设置宽高
常用于页面大结构

代表：

复制代码

div
p
h1
ul

2. 行内元素 inline

特点：

不换行
不能设置宽高
大小由内容决定

代表：

复制代码

span
a
strong

3. 行内块元素 inline-block

特点：

不换行
可以设置宽高
常用于导航、图片排列

代表：

复制代码

img
input

4. display属性

常用：

复制代码

display:block;

display:inline;

display:inline-block;

display:none;