关于IT基础

↩ zhcn 编程语言 Web相关 JSON 非公開: CSS显示（元素显示类型）

CSS显示（元素显示类型）

display 属性是 CSS 中最重要的属性之一，它主要用于控制元素的布局。

根据不同的元素类型，每个元素都有默认的显示属性值。例如， <div>的默认显示属性值为block（块级元素）， <span>的默认显示属性值为inline（内联）。元素），您还可以手动将元素的显示属性转换为不同的值。显示属性的可选值为：

价值解释
none隐藏元素
block将元素设置为块级元素
inline将元素设置为内联元素
list-item将元素设置为列表项
inline-block将元素设置为内联块元素
table将元素设置为块元素级别的表（类似于<table> ）。
inline-table将元素设置为内联元素级表（类似于<table> ）。
table-caption将元素设置为表格标题（类似于<caption> ）
table-cell将元素设置为表格单元格（例如<td>或<th> ）
table-row将元素设置为表格行（例如<tr> ）。
table-row-group将元素设置为表格的内容部分（例如<tbody> ）
table-column将元素设置为表格列（例如<col> ）
table-column-group将元素设置为表中一组或多列的组（类似于<colgroup> ）。
table-header-group将元素设置为表格的头部（类似于<thead> ）
table-footer-group将元素设置为桌脚（类似于<tfoot> ）
box CSS3 中的新属性值。这意味着该对象被设置为 Flexbox（Flexbox 的最旧版本）。
inline-box CSS3 中添加了新的属性值，以指示该对象被设置为内联元素级 Flexbox（Flexbox 的最旧版本）
flexbox CSS3 中的新属性值指示该对象设置为 Flexbox（Flexbox 的过渡版本）。
inline-flexbox CSS3 中的新属性值。这意味着该对象被设置为内联元素级 Flexbox（Flexbox 的过渡版本）。
flex CSS3中添加了新的属性值，以指示该对象配置为flexbox（最新版本的flexbox）
inline-flex CSS3中添加了新的属性值，以指示该对象被设置为内联元素级Flexbox（Flexbox的最新版本）
run-in将元素设置为块级元素还是内联元素取决于上下文
inherit继承父元素的显示属性值

Flexbox（Elasticbox）是CSS3中的一种新的布局模式，引入Flexbox的目的是为页面内的元素提供更有效的定位、对齐和分配空间的方式，如果您的页面需要适应不同的屏幕，布局可以确保。根据大小和设备类型适当调整元素的大小和位置。

下面介绍以下显示属性和一些常用属性值的使用：

显示：无

您可以使用属性值 none of display 使元素不可见。这和我们前面介绍CSSvisibility时提到的visibility: hidden;功能类似，但不同的是display: none;位置也是隐藏的。 display: none;通常与 JavaScript 结合使用来隐藏或显示元素。这是一个演示这一点的示例。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 350px;
            height: 100px;
            background-color: #AAA;
        }
    </style>
</head>
<body>
    <div id="box"> </div>
    <button onclick="change_box(this)">隠す</button>
    <script>
        function change_box(obj){
            var box = document.getElementById('box');
            if(box.style.display == 'none'){
                box.style.display = "";
                obj.innerHTML = "隠す";
            }else{
                box.style.display = "none";
                obj.innerHTML = "表示";
            }
        }
    </script>
</body>
</html>

运行上述代码，点击页面上的显示或隐藏按钮，即可显示或隐藏页面上指定的元素，如下图所示。

[标题id =“attachment_669”对齐=“aligncenter”宽度=“1024”] 图表：显示：无属性演示；图表：显示：无；属性演示[/标题]

显示：块

显示属性的属性值块可以强制元素成为块级元素。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a{
            display: block;
            width: 150px;
            height: 50px;
            background-color: #ACC;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="">これはリンクです</a>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_670”对齐=“aligncenter”宽度=“1024”] 图：显示：属性演示；图表：显示：属性演示[/标题]

显示：内嵌

display 属性的属性值 inline 可以强制元素成为内联元素。这赋予了元素内联元素的特征。例如，您可以与其他内联元素共享行。示例代码如下：

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: #ACC;
            border: 1px solid black;
        }
        .inline {
            display: inline;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div class="inline">display: inline;</div>
    <div class="inline">display: inline;</div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_671”对齐=“aligncenter”宽度=“1024”] 图：显示：内嵌属性演示；图：显示：内嵌属性演示[/caption]

显示：内联块

display属性的属性值inline-block可以让你强制将一个元素转换为内联块元素。内联块的特点是块可以设置宽度和高度，以及内联。不占空间，还有特点。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 130px;
            height: 50px;
            background-color: #ACC;
            border: 1px solid black;
        }
        .inline-block {
            display: inline-block;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div class="inline-block">display: inline-block;</div>
    <div class="inline-block">display: inline-block;</div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_672”对齐=“aligncenter”宽度=“1024”] 图：显示：内嵌属性演示；图：显示：内联属性演示[/caption]

通俗易懂的“CSS显示（元素显示类型）”讲解！您必须观看的最佳 2 个视频

【Lesson03-6】これができれば脱初心者！position・transformを使った要素の配置/TOP画像の上・中央にキャプションを表示する【cafeホームページ】
https://www.youtube.com/watch?v=VF43yR1isnU&pp=ygUqQ1NT6KGo56S677yI6KaB57Sg6KGo56S644K_44Kk44OX77yJJmhsPUpB
【CSS入門】positionで要素の位置を移動させよう！ #11
https://www.youtube.com/watch?v=SZZy6QbCRlI&pp=ygUqQ1NT6KGo56S677yI6KaB57Sg6KGo56S644K_44Kk44OX77yJJmhsPUpB
display 属性是 CSS 中最重要的属性之一，它主要用于控制元素的布局。

根据不同的元素类型，每个元素都有默认的显示属性值。例如， <div>的默认显示属性值为block（块级元素）， <span>的默认显示属性值为inline（内联）。元素），您还可以手动将元素的显示属性转换为不同的值。显示属性的可选值为：

价值解释
none隐藏元素
block将元素设置为块级元素
inline将元素设置为内联元素
list-item将元素设置为列表项
inline-block将元素设置为内联块元素
table将元素设置为块元素级别的表（类似于<table> ）。
inline-table将元素设置为内联元素级表（类似于<table> ）。
table-caption将元素设置为表格标题（类似于<caption> ）
table-cell将元素设置为表格单元格（例如<td>或<th> ）
table-row将元素设置为表格行（例如<tr> ）。
table-row-group将元素设置为表格的内容部分（例如<tbody> ）
table-column将元素设置为表格列（例如<col> ）
table-column-group将元素设置为表中一组或多列的组（类似于<colgroup> ）。
table-header-group将元素设置为表格的头部（类似于<thead> ）
table-footer-group将元素设置为桌脚（类似于<tfoot> ）
box CSS3 中的新属性值。这意味着该对象被设置为 Flexbox（Flexbox 的最旧版本）。
inline-box CSS3 中添加了新的属性值，以指示该对象被设置为内联元素级 Flexbox（Flexbox 的最旧版本）
flexbox CSS3 中的新属性值指示该对象设置为 Flexbox（Flexbox 的过渡版本）。
inline-flexbox CSS3 中的新属性值。这意味着该对象被设置为内联元素级 Flexbox（Flexbox 的过渡版本）。
flex CSS3中添加了新的属性值，以指示该对象配置为flexbox（最新版本的flexbox）
inline-flex CSS3中添加了新的属性值，以指示该对象被设置为内联元素级Flexbox（Flexbox的最新版本）
run-in将元素设置为块级元素还是内联元素取决于上下文
inherit继承父元素的显示属性值

Flexbox（Elasticbox）是CSS3中的一种新的布局模式，引入Flexbox的目的是为页面内的元素提供更有效的定位、对齐和分配空间的方式，如果您的页面需要适应不同的屏幕，布局可以确保。根据大小和设备类型适当调整元素的大小和位置。

下面介绍以下显示属性和一些常用属性值的使用：

显示：无

您可以使用属性值 none of display 使元素不可见。这和我们前面介绍CSSvisibility时提到的visibility: hidden;功能类似，但不同的是display: none;位置也是隐藏的。 display: none;通常与 JavaScript 结合使用来隐藏或显示元素。这是一个演示这一点的示例。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 350px;
            height: 100px;
            background-color: #AAA;
        }
    </style>
</head>
<body>
    <div id="box"> </div>
    <button onclick="change_box(this)">隠す</button>
    <script>
        function change_box(obj){
            var box = document.getElementById('box');
            if(box.style.display == 'none'){
                box.style.display = "";
                obj.innerHTML = "隠す";
            }else{
                box.style.display = "none";
                obj.innerHTML = "表示";
            }
        }
    </script>
</body>
</html>

运行上述代码，点击页面上的显示或隐藏按钮，即可显示或隐藏页面上指定的元素，如下图所示。

[标题id =“attachment_669”对齐=“aligncenter”宽度=“1024”] 图表：显示：无属性演示；图表：显示：无；属性演示[/标题]

显示：块

显示属性的属性值块可以强制元素成为块级元素。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a{
            display: block;
            width: 150px;
            height: 50px;
            background-color: #ACC;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="">これはリンクです</a>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_670”对齐=“aligncenter”宽度=“1024”] 图：显示：属性演示；图表：显示：属性演示[/标题]

显示：内嵌

display 属性的属性值 inline 可以强制元素成为内联元素。这赋予了元素内联元素的特征。例如，您可以与其他内联元素共享行。示例代码如下：

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: #ACC;
            border: 1px solid black;
        }
        .inline {
            display: inline;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div class="inline">display: inline;</div>
    <div class="inline">display: inline;</div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_671”对齐=“aligncenter”宽度=“1024”] 图：显示：内嵌属性演示；图：显示：内嵌属性演示[/caption]

显示：内联块

display属性的属性值inline-block可以让你强制将一个元素转换为内联块元素。内联块的特点是块可以设置宽度和高度，以及内联。不占空间，还有特点。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 130px;
            height: 50px;
            background-color: #ACC;
            border: 1px solid black;
        }
        .inline-block {
            display: inline-block;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div class="inline-block">display: inline-block;</div>
    <div class="inline-block">display: inline-block;</div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_672”对齐=“aligncenter”宽度=“1024”] 图：显示：内嵌属性演示；图：显示：内联属性演示[/caption]

通俗易懂的“CSS显示（元素显示类型）”讲解！您必须观看的最佳 2 个视频

【Lesson03-6】これができれば脱初心者！position・transformを使った要素の配置/TOP画像の上・中央にキャプションを表示する【cafeホームページ】
https://www.youtube.com/watch?v=VF43yR1isnU&pp=ygUqQ1NT6KGo56S677yI6KaB57Sg6KGo56S644K_44Kk44OX77yJJmhsPUpB
【CSS入門】positionで要素の位置を移動させよう！ #11
https://www.youtube.com/watch?v=SZZy6QbCRlI&pp=ygUqQ1NT6KGo56S677yI6KaB57Sg6KGo56S644K_44Kk44OX77yJJmhsPUpB

最新文章列表

IT基礎ロゴ

这是一个通过简明易懂的方式解说了解IT行业时需要掌握的IT基础知识的网站。

关于IT基础

关于IT基础

使用条款

隐私政策

联系方式

RSS

推荐环境 / 建议环境

科技

新闻

最新技术

人工智能

游戏

Windows

手机

安全

DevOps

网络

数据库

计算机硬件

商业

数字营销

数据可视化

设计

业务运营

客户服务

人力资源管理

协作

销售与市场营销

初创公司

金融科技

平台

Android

IOS

应用程序

Windows

MACOS

网页领域

LINUX

GOOGLE

CHROME BOOK

教育科技

关于IT基础@2024 All rights reseved