CSS 教程

CSS 属性

CSS 进阶

CSS 设计

CSS 问题

CSS 其它

CSS 多选题

CSS 面试问题

CSS Display显示


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

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

CSS 显示默认属性


默认值排队
遗传不
动画支持不
版本css1
JavaScript 语法object.style.display="无"


句法 (Syntax)

display:value;

CSS 显示值

有以下常用的 CSS 显示值。

  1. 显示：内联；

  2. 显示：内联块；

  3. 显示：块；

  4. 显示：磨合；

  5. 显示：无；

1) CSS 显示内联

内联元素仅采用所需的宽度。它不会强制换行，因此文本流不会在内联示例中中断。

内联元素是：

  • <span>

  • <a>

  • <em>

  • <b> etc.

让我们看一个 CSS 显示内联的例子。

例子 (Example)

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
display: inline;   
}  
</style>  
</head>  
<body>  
<p>Hello rocschool.com</p>  
<p>Java Tutorial.</p>  
<p>SQL Tutorial.</p>  
<p>HTML Tutorial.</p>  
<p>CSS Tutorial.</p>  
</body>  
</html>
自己试试 »

2) CSS 显示 inline-block

CSS display inline-block 元素与 inline 元素非常相似，但不同之处在于您可以设置宽度和高度。

例子 (Example)

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
display: inline-block;   
}  
</style>  
</head>  
<body>  
<p>Hello rocschool.com</p>  
<p>Java Tutorial.</p>  
<p>SQL Tutorial.</p>  
<p>HTML Tutorial.</p>  
<p>CSS Tutorial.</p>  
</body>  
</html>
自己试试 »

3) CSS 显示块

CSS 显示块元素尽可能多地占用水平空间。意味着块元素采用完整的可用宽度。他们在他们之前和之后换行。

例子 (Example)

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

4) CSS 显示磨合

此属性在Mozilla Firefox 中不起作用。这些元素本身不会产生特定的盒子。

  • 如果磨合框包含一个块框，它将与块相同。

  • 如果块框在插入框之后，则插入框将成为块框的第一个内嵌框。

  • 如果 inline box 跟在 run-in box 之后，run-in box 就变成了 block box。

例子 (Example)

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

5) CSS 显示无

“none”值完全从页面中删除元素。它不会占用任何空间。

例子 (Example)

<!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它用于将元素显示为内联级 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> 元素。


上一主题 CSS border-spacing边框间距属性 下一主题 CSS Cursor光标
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具