上查看所有课程
CSS 的 display 属性用于调整元素的布局。例如，
div {
display: inline-block;
}浏览器输出
在此，display 属性的 inline-block 值将两个 div 元素置于同一水平流中。默认情况下，像 div、h1 等块级元素会另起一行并占据全部宽度。
display 属性允许改变行内元素和块级元素的显示行为。
CSS Display 语法
display 属性的语法如下：
display: value;display 属性常用的值如下：
inline：允许元素表现得像一个行内元素。block：允许元素表现得像一个块级元素。inline-block：将元素格式化为行内级别，但同时也允许设置高度/宽度，就像块级元素一样。flex：将元素设置为 flex 容器，为其子元素提供灵活的布局。grid：将元素设置为 grid 容器，以创建复杂的布局。none：从文档中移除元素，不占用任何空间。
CSS Display Inline
display 属性的 inline 值允许块级元素表现得像行内元素。行内元素只占用其内容所需的宽度。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Display</title>
</head>
<body>
<h2>Before display: inline</h2>
<div>I am a first div element.</div>
<div>I am a second div element.</div>
<!-- Adding display: inline in divs -->
<h2>After display: inline</h2>
<div class="after">I am a first div element.</div>
<div class="after">I am a second div element.</div>
</body>
</html>div {
border: 2px solid black;
margin-bottom: 12px;
padding: 4px;
}
div.after {
display: inline;
}浏览器输出
在上面的示例中，inline 值使块级元素 div 表现得像行内元素。
因此，它占据了所需的最小宽度，并且不另起一行。
CSS Display Block
display 属性的 block 值使行内元素表现得像块级元素。例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Display</title>
</head>
<body>
<h2>Before display: block</h2>
<span>I am a first span element.</span>
<span>I am a second span element.</span>
<!-- Adding display: block in spans-->
<h2>After display: block</h2>
<span class="after">I am a first span element.</span>
<span class="after">I am a second span element.</span>
</body>
</html>span {
border: 2px solid black;
margin-bottom: 12px;
padding: 4px;
}
span.after {
display: block;
}浏览器输出
在上面的示例中，block 值使行内元素 span 表现得像块级元素。
因此，它另起一行并占据整个宽度。
CSS Display Inline Block
display 属性的 inline-block 值结合了 inline 和 block 元素的特征。
当一个元素的 display 被设置为 inline-block 时，
- 它像行内元素一样流动，允许其他元素在水平方向上围绕它流动。
- 它接受
width和height属性。（默认情况下，宽度和高度在行内元素中不起作用。） - 它接受
padding和margin值。（默认情况下，行内元素的上下边距不生效，padding 也不会将其他元素推开。）
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Display</title>
</head>
<body>
<h2>Before display: inline-block</h2>
<p>
In this paragraph, the <span>span</span> element is color in
green-yellow color. The width and height don't work, the padding
value doesn't push surrounding content away, and the top/bottom
margins don't work.
</p>
<!-- Adding display: inline-block the divs -->
<h2>After display: inline-block</h2>
<p>
In this paragraph, the <span class="after">span</span> element is
color in green-yellow color. The width and height work, the padding
value push surrounding content away, and the top/bottom margins
work.
</p>
</body>
</html>span {
width: 60px;
height: 30px;
padding: 10px;
margin: 20px;
border: 2px solid black;
background-color: greenyellow;
}
span.after {
display: inline-block;
}浏览器输出
CSS Display Flex
display 属性的 flex 值允许在父元素内的子元素之间进行高效的对齐和空间分配。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Display</title>
</head>
<body>
<ul class="parent">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Blogs</li>
<li>Contact</li>
</ul>
</body>
</html>ul.parent {
display: flex;
background-color: greenyellow;
padding: 0px;
}
li {
background: skyblue;
border: 1px solid black;
padding: 12px;
margin: 8px;
list-style: none;
}浏览器输出
在上面的示例中，display 属性的 flex 值将 li 元素排列成水平布局。
注意：Flex 是创建灵活且响应式布局的强大工具。它包含一系列相关的属性和值，可以用于创建复杂的布局。
我们将在接下来的教程中学习 flex 布局。
CSS Display None
display 属性的 none 值用于隐藏一个元素，并将其从文档的正常文档流中移除。
让我们看一个例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Display</title>
</head>
<body>
<h1>Heading: CSS Display Property</h1>
<p>
The display: none hides the element and removes the space from the
document.
</p>
</body>
</html>h1 {
border: 2px solid black;
background-color: greenyellow;
}浏览器输出
在上面的示例中，如果我们添加
h1 {
display: none;
}那么浏览器输出将是：
在此，h1 被隐藏了，并且文档中移除了该空间。