数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学CSS 最新更新 - display 属性的内值和外值
现在，我们可以通过 CSS display 的双值语法明确设置元素的显示类型。这将允许我们更改元素的流布局。
显示内联元素
以下示例说明了带有多个关键字的 CSS display 属性：
display: inline flow-root;
inline 将元素显示为内联元素，而使用 flow-root，元素会生成一个块级框，从而建立新的块级格式上下文。
示例
让我们来看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
body,div,span {
box-shadow: inset 0 0 12px lightgreen;
border: 2px dotted gray;
}
span {
padding: 2%;
display: inline flow-root;
}
</style>
</head>
<body>
<div>
<p>
Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus.
</p>
<img src="https://images.unsplash.com/photo-1611625618313-68b87aaa0626?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
<span>Inline Block</span> <span>Span</span>
Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia.
</div>
</body>
</html>
使用内值更改默认显示
示例
现在让我们来看一个示例，我们为<li>元素设置内联 display 属性值并创建一个水平菜单：
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: orange;
color: white;
}
li {
display: inline;
}
</style>
</head>
<body>
<h2>Tutorials List</h2>
<p>The following are the list of resources:</p>
<ul>
<li><a href="https://tutorialspoint.com/machine_learning/index.htm" target="_blank">Machine Learning</a></li>
<li><a href="https://tutorialspoint.com/python_data_science/index.htm" target="_blank">Python Data Science</a></li>
<li><a href="https://tutorialspoint.com/python/index.htm" target="_blank">Python</a></li>
<li><a href="https://tutorialspoint.com/csharp/index.htm">C#</a></li>
<li><a href="https://tutorialspoint.com/artificial_intelligence/index.htm" target="_blank">Artificial Intelligence</a></li>
</ul>
</body>
</html>
将元素 Span 显示为块级元素
在这个例子中，我们使用了带有多个关键字的display 属性：
display: block flow;
block 将元素显示为块级元素，而元素使用流布局来布置其内容。
示例
让我们来看一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
body,div,span {
margin: 2%;
box-shadow: inset 0 0 12px orange;
border: 2px ridge cadetblue;
}
span {
padding: 2%;
display: block flow;
}
</style>
</head>
<body>
<div>
<p>This is demo text.</p>
<span>Block is now</span> <span>Block Flow</span>
This is another demo text.
</div>
</body>
</html>
更改元素的默认显示
现在让我们来看一个示例，我们为<a>元素设置 block display 属性值：
a {
display: block;
}
示例
这是一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
a {
display: block;
}
</style>
</head>
<body>
<h1>Our Tutorials</h1>
<a href="https://tutorialspoint.com/machine_learning/index.htm" target="_blank">Machine Learning</a>
<a href="https://tutorialspoint.com/python_data_science/index.htm" target="_blank">Data Science</a>
<a href="https://tutorialspoint.com/csharp/index.htm" target="_blank">C#</a>
</body>
</html>
更新于：2023年10月31日
214 次浏览
广告