蓝桥杯Web应用开发-display属性

display 属性

专栏持续更新中

display 属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。

display 属性值的说明如下表所示。

属性值	说明
block	元素以块级方式展示。
inline	元素以内联方式展示。
inline-block	元素以内联块的方式展示。
none	隐藏元素。

block 属性值

block 属性值可以让行内元素以块级元素的方式显示在页面上。
其使用格式如下：

display: block;

还记得前面学过的行内元素的概念吗？行内元素就是可以和其他元素同处一行的元素，例如 span 标签元素。
举个例子～
新建一个 index.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>span {display: block;}</style></head><body><span>示例</span><span>内容</span>  </body>
</html>

在这里插入图片描述

可以看到，原本 span 标签是行内元素，却因为设置 display: block; 导致「蓝桥」与「云课」分开了。

inline 属性值

inline 属性值可以让像 div 这样的霸道块，接纳其他元素来自己的地盘。
其使用格式如下：

display: inline;

举个例子～
新建一个 index1.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {display: inline;}</style></head><body><div>示例</div>
<div>内容</div>  
</body>
</html>

在这里插入图片描述

inline-block 属性值

我们的块内元素和行内元素有其独特的优势，在某些情况下，我们想让一个元素既具有块内元素的特点，又具备行内元素的特点。这就要请出 inline-block 属性值来施展这个魔法了。
其使用格式如下：

display: inline-block;

比如，我们用 a 标签来实现导航的时候，a 标签虽然可以让元素在一行显示，但若我们想给每个 a 标签加上高和宽时发现没有任何效果。这时候用上 display: inline-block，它就具备块的特性了。
我们来看个例子～
新建一个 index2.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>a {text-decoration: none;background-color: rgb(95, 118, 160);display: inline-block;width: 70px;height: 30px;text-align: center;}</style></head><body><a href="#">首页</a><a href="#">分类</a><a href="#">展示</a><a href="#">更多</a></body>
</html>

在这里插入图片描述

none 属性值

none 属性值可以用来隐藏页面上的元素。
使用格式如下：

display: none;

举个例子～
新建一个 index3.html 文件，在其中写入以下内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {display: none;}</style></head><body><div>哈哈，看不见我🤫</div></body>
</html>