srcmini本文概述
CSS显示是CSS的最重要属性, 用于控制元素的布局。它指定元素的显示方式。
每个元素根据其性质都有默认的显示值。网页上的每个元素都是一个矩形框, 而CSS属性定义了该矩形框的行为。
CSS显示默认属性
| 默认值 | inline |
| inherited | no |
| 动画配套 | no |
| version | css1 |
| javascript syntax | object.style.display =“ none” |
句法
display:value;CSS显示值
以下是常用的CSS显示值。
- 显示：内联；
- 显示：inline-block;
- 显示：块；
- 显示：磨合；
- 显示：无；
1）CSS内联显示
内联元素仅采用所需的宽度。它不会强制换行, 因此在嵌入式示例中文本流不会中断。
内联元素是：
- <span>
- <a>
- <em>
- <b>等
让我们来看一个内联CSS显示的示例。
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline;
}
</style>
</head>
<body>
<p>Hello srcmini02.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>输出：
你好srcmini02.com Java教程。 SQL教程。 HTML教程。 CSS教程。
2）CSS显示内联块
CSS显示inline-block元素与inline元素非常相似, 但是不同之处在于你可以设置宽度和高度。
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: inline-block;
}
</style>
</head>
<body>
<p>Hello srcmini02.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>输出：
你好srcmini02.com Java教程。 SQL教程。 HTML教程。 CSS教程。
3）CSS显示块
CSS显示块元素会占用尽可能多的水平空间。表示块元素占据了全部可用宽度。他们在他们之前和之后进行换行。
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: block;
}
</style>
</head>
<body>
<p>Hello srcmini02.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>输出：
你好srcmini02.com
Java教程。
SQL教程。
HTML教程。
CSS教程。
4）CSS显示磨合
此属性在Mozilla Firefox中不起作用。这些元素本身不会产生特定的框。
- 如果磨合盒包含一个装箱盒, 它将与块相同。
- 如果块盒紧跟导入盒, 则进入盒将成为块盒的第一个内联盒。
- 如果内联框位于插入框之后, 则插入框将成为块框。
<!DOCTYPE html>
<html>
<head>
<style>
p {
display: run-in;
}
</style>
</head>
<body>
<p>Hello srcmini02.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>输出：
你好srcmini02.com
Java教程。
SQL教程。
HTML教程。
CSS教程。
5）CSS显示无
“无”值将完全从页面中删除该元素。它不会占用任何空间。
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This heading is visible.</h1>
<h1 class="hidden">This is not visible.</h1>
<p>You can see that the hidden heading does not contain any space.</p>
</body>
</html>输出：
该标题是可见的。
你可以看到隐藏的标题不包含任何空格。
其他CSS显示值
| 属性值 | 描述 |
|---|---|
| flex | 它用于将元素显示为块级Flex容器。它是CSS3中的新功能。 |
| inline-flex | 它用于将元素显示为内联级别的伸缩容器。它是CSS3中的新功能。 |
| inline-table | 它将元素显示为内联级表。 |
| list-Item | 它使元素的行为类似于<li>元素。 |
| table | 它使元素的行为类似于<table>元素。 |
| table-caption | 它使元素的行为类似于<caption>元素。 |
| table-column-group | 它使元素的行为类似于<colgroup>元素。 |
| table-header-group | 它使元素的行为类似于<thead>元素。 |
| table-footer-group | 它使元素的行为类似于<tfoot>元素。 |
| table-row-group | 它使元素的行为类似于<tbody>元素。 |
| table-cell | 它使元素的行为类似于<td>元素。 |
| table-row | 它使元素的行为类似于<tr>元素。 |
| table-column | 它使元素的行为类似于<col>元素。 |
评论前必须登录！
注册