📌  相关文章
📜  CSS显示

📅  最后修改于: 2020-11-04 05:39:34             🧑  作者: Mango

CSS显示

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

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

CSS显示默认属性

default value inline
inherited no
animation supporting no
version css1
javascript syntax object.style.display=”none”

句法

display:value;

CSS显示值

以下是常用的CSS显示值。

  • display: inline;
  • display: inline-block;
  • display: block;
  • display: run-in;
  • display: none;

1)CSS内联显示

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

内联元素是：

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








Hello Javatpoint.com


Java Tutorial.


SQL Tutorial.


HTML Tutorial.


CSS Tutorial.

输出：

Hello Javatpoint.com Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.

2)CSS显示内联块

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








Hello Javatpoint.com


Java Tutorial.


SQL Tutorial.


HTML Tutorial.


CSS Tutorial.

输出：
Hello Javatpoint.com Java Tutorial. SQL Tutorial. HTML Tutorial. CSS Tutorial.

3)CSS显示块

CSS显示块元素会占用尽可能多的水平空间。表示块元素占据了全部可用宽度。他们在他们之前和之后进行换行。








Hello Javatpoint.com


Java Tutorial.


SQL Tutorial.


HTML Tutorial.


CSS Tutorial.

输出：

Hello Javatpoint.com

Java Tutorial.

SQL Tutorial.

HTML Tutorial.

CSS Tutorial.

4)CSS display run-in

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

  • 如果run-in box包含一个 bock box，它将与块相同。
  • 如果block box 紧跟run-in box，则run-in box将成为block box的第一个inline box。
  • 如果inline box位于run-in box后，则run-in box将成为block box。







Hello Javatpoint.com


Java Tutorial.


SQL Tutorial.


HTML Tutorial.


CSS Tutorial.

输出：

Hello Javatpoint.com

Java Tutorial.

SQL Tutorial.

HTML Tutorial.

CSS Tutorial.

5)CSS显示 none

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








This heading is visible.


This is not visible.


You can see that the hidden heading does not contain any space.

输出：

This heading is visible.

您可以看到隐藏的标题不包含任何空格。

其他CSS显示值

Property-value Description
flex It is used to display an element as an block-level flex container. It is new in css3.
inline-flex It is used to display an element as an inline-level flex container. It is new in css3.
inline-table It displays an element as an inline-level table.
list-Item It makes the element behave like a
  • element.
    		•
    table It makes the element behave like a element.element. element. element. element. element.element.
    table-caption It makes the element behave like a
    element.
    table-column-group It makes the element behave like a
    table-header-group It makes the element behave like a
    table-footer-group It makes the element behave like a
    table-row-group It makes the element behave like a
    table-cell It makes the element behave like a element.
    table-row It makes the element behave like a
    table-column It makes the element behave like a