蓝桥杯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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<style>
div {
display: none;
}
style>
head>
<body>
<div>哈哈，看不见我div>
body>
html>
点击预览，可以发现页面上空空的。