个性化阅读
专注于IT技术分析

CSS显示HTML元素

本文概述

CSS显示是CSS的最重要属性, 用于控制元素的布局。它指定元素的显示方式。

每个元素根据其性质都有默认的显示值。网页上的每个元素都是一个矩形框, 而CSS属性定义了该矩形框的行为。

CSS显示默认属性

默认值 inline
inherited no
动画配套 no
version css1
javascript syntax object.style.display =“ none”

句法

display:value;

CSS显示值

以下是常用的CSS显示值。

  1. 显示:内联;
  2. 显示:inline-block;
  3. 显示:块;
  4. 显示:磨合;
  5. 显示:无;

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>元素。
赞(0)
未经允许不得转载:srcmini » CSS显示HTML元素

评论 抢沙发

评论前必须登录!