CSS显示HTML元素 CSS显示|CSS2

本文概述

CSS显示默认属性
句法
CSS显示值
1）CSS内联显示
2）CSS显示内联块
3）CSS显示块
4）CSS显示磨合
5）CSS显示无
该标题是可见的。
其他CSS显示值

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 srcmini.com< /p> < p> Java Tutorial.< /p> < p> SQL Tutorial.< /p> < p> HTML Tutorial.< /p> < p> CSS Tutorial.< /p> < /body> < /html>

输出：
你好srcmini.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 srcmini.com< /p> < p> Java Tutorial.< /p> < p> SQL Tutorial.< /p> < p> HTML Tutorial.< /p> < p> CSS Tutorial.< /p> < /body> < /html>

输出：
你好srcmini.com Java教程。 SQL教程。 HTML教程。 CSS教程。
3）CSS显示块CSS显示块元素会占用尽可能多的水平空间。表示块元素占据了全部可用宽度。他们在他们之前和之后进行换行。

< !DOCTYPE html> < html> < head> < style> p { display: block; } < /style> < /head> < body> < p> Hello srcmini.com< /p> < p> Java Tutorial.< /p> < p> SQL Tutorial.< /p> < p> HTML Tutorial.< /p> < p> CSS Tutorial.< /p> < /body> < /html>

输出：
你好srcmini.com
Java教程。
【CSS显示HTML元素】SQL教程。
HTML教程。
CSS教程。
4）CSS显示磨合此属性在Mozilla Firefox中不起作用。这些元素本身不会产生特定的框。

如果磨合盒包含一个装箱盒, 它将与块相同。
如果块盒紧跟导入盒, 则进入盒将成为块盒的第一个内联盒。
如果内联框位于插入框之后, 则插入框将成为块框。

< !DOCTYPE html> < html> < head> < style> p { display: run-in; } < /style> < /head> < body> < p> Hello srcmini.com< /p> < p> Java Tutorial.< /p> < p> SQL Tutorial.< /p> < p> HTML Tutorial.< /p> < p> CSS Tutorial.< /p> < /body> < /html>

输出：
你好srcmini.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> 元素。