CSS 之 display属性详解-CSDN博客

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

一、总览

​ CSS的 display 属性用于设置元素的显示类型或设置其子元素的布局类型。 display属性值的适用性取决于元素的类型和上下文。某些属性值只适用于特定类型的元素使用时需注意兼容性和语义化。

​ 其属性值共计有18种按照类别可以分为以下六类

  • 外部表现类display-outsideblock、inline。
  • 内部表现类display-insideflex、grid、table、flow、flow-root、ruby。
  • 列表元素类display-listitemlist-item。
  • 内部结构类display-internaltable-row、table-cell、table-column、table-caption、table-row-group、table-header-group、table-footer-group、table-column-group、ruby-base、ruby-text、ruby-base-container、ruby-text-container。
  • 元素显示类display-boxnone、contents。
  • 预组合类display-legacyinline-block、inline-table、inline-flex、inline-grid。

二、外部表现类

​ 该类属性值的效果是规定元素的外部显示类型也就是在页面布局中的元素类型块级元素或内联元素。

1、block

​ 该属性值用于设置元素的外显类型为块级元素在页面布局中占据一整行的空间在元素前后进行换行。该类型的元素可以设置width、height、padding、margin等属性。

<style>
.d {
  display: block;
  width: 200px;
  height: 100px;
  background: pink;
}
</style>

<p>这是一段文本</p>
<div class="d">这是一个块级元素</div>
<p>这是第二段文本</p>
页面表现

在这里插入图片描述

2、inline

​ 该属性值用于设置元素的外显类型为行内元素在页面布局中可与其他行内元素位于同一行。该类型的元素设置width、height以及竖直方向的margintop、bottom属性无效设置水平方向的padding、marginleft、right是有效的设置竖直方向的paddingtop、bottom时在元素空间上是有效的但这并不会影响与同一行的行内元素的对齐。

<style>
.d1 {
  display: inline;
  width: 200px;
  height: 100px;
  margin: 10px 20px;
  padding: 20px 10px;
  background: pink;
}
</style>

<p>这是一段块级元素文本</p>
<span>这是一段行内元素文本</span>
<div class="d1">这是一个行内元素</div>
<span>这是第二段行内元素文本</span>
页面表现

在这里插入图片描述

三、内部表现类

​ 这类属性值的效果是规定元素的内部显示类型即定义元素内部子元素的布局方式。

1、flex

​ 该属性值用于设置元素的内部显示类型为弹性布局其外显类型为块级元素。该类型的元素可以通过一系列相关属性控制子元素在标准轴线上的布局方式和占位空间。更多内容可查看flex布局。

​ 该属性值的主要应用场景为多个块级元素水平居中对齐等。

<style>
  .d1 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ccc;
  }
  .d1>div {
    width: 150px;
    height: 150px;
    margin-right: 10px;
    background: pink;
  }
</style>

<div class="d1">
  <div class="d1-1">第一个块级元素</div>
  <div class="d1-2">第二个块级元素</div>
  <div class="d1-3">第三个块级元素</div>
</div>
页面表现

在这里插入图片描述

2、grid

​ 该属性值用于设置元素内部的显示类型为网格布局其外显类型为块级元素。该类型的元素将内部分为行和列划分成一个个单元格并通过一系列相关属性控制单元格的布局和大小。更多内容可查看grid布局。

​ 该属性值的主要应用场景为多行多列元素水平且垂直对齐。

<style>
.d2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px; 
  /* 设置行间距和列间距为20px */
  gap: 20px;
}
.d2>div {
  background: pink;
  text-align: center;
}
.d2>div:nth-child(2n){
background: yellow;
}
</style>

<div class="d2">
  <div class="d2-1">1</div>
  <div class="d2-2">2</div>
  <div class="d2-3">3</div>
  <div class="d2-4">4</div>
  <div class="d2-5">5</div>
  <div class="d2-6">6</div>
  <div class="d2-7">7</div>
  <div class="d2-8">8</div>
  <div class="d2-9">9</div>
</div>
页面表现

在这里插入图片描述

3、table

​ 该属性值用于设置元素为块级元素且内部的显示类型为表格布局具体行为类似于HTML中的<table>元素。 可以用于实现复杂的表格结构以及对表格样式和行为的精确控制。更多内容可查看table 布局。

demo示例
<style>
.table {
	display: table;
	background: pink;
  border-collapse: collapse;
}
.row {
	display: table-row;
}
.cell {
	display: table-cell;
	border: 1px solid #cccccc;
}
</style>

<div class="table">
    <div class="row">
      <div class="cell">张三</div>
      <div class="cell">李四</div>
      <div class="cell">王五</div>
    </div>
    <div class="row">
      <div class="cell">张三三</div>
      <div class="cell">李四四</div>
      <div class="cell">王五五</div>
    </div>
    <div class="row">
      <div class="cell">张三三三</div>
      <div class="cell">李四四四</div>
      <div class="cell">王五五五</div>
    </div>
</div>
页面效果

在这里插入图片描述

4、flow-root

​ 该属性值用于设置元素为块级元素内部显示类型为建立一个新的块级格式化上下文BFC从而具有包含内部浮动、排除外部浮动和阻止外边距塌陷等相关特性。

demo示例
<style>
.d1 {
  /* 设置该属性 包含子元素的浮动 使其占据普通文档流位置 */
	display: flow-root;
	background: #ccc;
}
.d1-1 {
	float: left;
	width: 30px;
	height: 30px;
	background: red;
}
.d1-2 {
	float: right;
	width: 40px;
	height: 40px;
	background: yellow;
}
</style>

<div class="d1">
	<div class="d1-1">
		1111
	</div>
	<div class="d1-2">
		2222
	</div>
</div>
<div class="d2">
	这是第二个盒子
</div>
页面效果

在这里插入图片描述

5、flow实验属性

​ 该属性值用于设置元素内部的显示类型为流式布局使元素的布局不再受到块级元素和内联元素的限制可以根据可用空间自动调整大小和位置以适应不同的屏幕尺寸和布局要求。

​ 如果该元素的外显类型为inline或run-in并且参与了一个块级或内联格式上下文中那么将生成一个内联盒子否则将会生成一个块级盒子。

​ 该属性值属性需要配合其他相关的布局属性一起使用如 flow-orientation、flow-from 和 flow-into 等以实现更具体的布局效果。

​ 但是该属性值目前处于实验阶段还未被所有的浏览器完全支持因此不建议使用。

6、ruby实验属性

​ 该属性值用于设置元素内部为ruby 注记ruby annotation布局其行为相当于HTML中的<ruby>元素。Ruby 注记是一种用于展示东亚语言中的发音、注解或翻译的特殊文本布局方式。

​ 使用 display: ruby; 属性可以将基本文本和注音文本进行布局并确保它们在页面上正确地显示。

​ 但是属性目前处于实验阶段还未被所有的浏览器完全支持目前只有Firefox和IE浏览器支持该属性因此不建议使用。但<ruby>元素几乎被所有浏览器支持所以更建议使用ruby元素。

​ 还有其他一些与 Ruby 注记相关的属性如 ruby-position用于控制注音文本的位置和 ruby-align用于控制注音文本的对齐方式等。

demo示例
<p style="display: ruby;">
		<span style="display: ruby-base;">漢</span>
    <span style="display: ruby-text;">かん</span>
		<span style="display: ruby-base;">字</span>
    <span style="display: ruby-text;">じ</span>
</p>
<br><br>
<ruby>
	汉 
	<rp>(</rp><rt>han</rt><rp>)</rp> 
	字 
	<rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
页面效果

在这里插入图片描述

四、列表元素类

​ 该类型的属性值用于实现列表元素的部分和样式效果。

1、list-item

​ 该属性值用于设置元素类型为了列表元素外显类型为块级元素类似于HTML中<ul>内部的<li>元素。元素在设置该属性值之后内部会出现一个::marker的伪元素作为列表的icon标记我们可以结合list-style相关属性list-style-position、list-style-type、list-style-image对该标记进行操作这些属性同样也可以操作<ul>、<ol>等列表元素的icon标记。

​ list-style-position用于设置icon标记在元素中的位置属性值有outside(默认)和inside。

​ list-style-type用于设置icon标记的样式常见属性值有disc(默认)、square、decimal等等。

​ list-style-image用于设置icon标记为一张图片属性值为url(...)。

demo示例
  <style>
    .div1-1 {
      display: list-item;
      list-style-position: outside;
      /* list-style-type 默认为disc */
      list-style-type: disc;
    }

    .div1-3 {
      display: list-item;
      list-style-position: inside;
      /* 设置列表icon为实心方块 */
      list-style-type: square;
    }

    .div1-4 {
      display: list-item;
      list-style-position: inside;
      list-style-image: url(./images/list-icon.png);
    }
  </style>

  <div class="div1">
    <div class="div1-1">
      这是第一个模拟列表元素的div
    </div>
    <div class="div1-2">
      这是一个正常的div元素
    </div>
    <div class="div1-3">
      这是第二个模拟列表元素的div
    </div>
    <div class="div1-4">
      这是第三个模拟列表元素的div
    </div>
  </div>
页面效果

在这里插入图片描述

五、内部结构类

​ 该类型的属性值用于设置各种布局内部元素的结构和样式。

1、table-row-group

​ 该属性值用于设置元素为表格的主体内容类似于HTML的<tbody>。详细内容请查看table 布局。

2、table-header-group

​ 该属性值用于设置元素为表格的表头行类似于HTML的<thead>。详细内容请查看table 布局。

3、table-footer-group

​ 该属性值用于设置元素为表格的表尾行类似于HTML的<tfoot>。详细内容请查看table 布局。

4、table-row

​ 该属性值用于设置元素为表格的行类似于HTML的<tr>。详细内容请查看table 布局。

5、table-cell

​ 该属性值用于设置元素为表格的单元格类似于HTML的<td>、<th>。详细内容请查看table 布局。

6、table-column-group

​ 该属性值用于设置元素为表格的列组类似于HTML的<colgroup>。详细内容请查看table 布局。

7、table-column

​ 该属性值用于设置元素为表格的列类似于HTML的<col>。详细内容请查看table 布局。

8、table-caption

​ 该属性值用于设置元素为表格的标题类似于HTML的<caption>。详细内容请查看table 布局。

9、ruby-base实验属性

​ 该属性值用于设置元素为ruby 布局的基本文本类似于HTML的<rb>元素。

​ 该属性值目前处于实验阶段还未被所有的浏览器完全支持目前只有Firefox和IE浏览器支持该属性因此不建议使用。

10、ruby-text实验属性

​ 该属性值用于设置元素为ruby 布局的注音文本类似于HTML的<rt>元素。

​ 该属性值目前处于实验阶段还未被所有的浏览器完全支持目前只有Firefox和IE浏览器支持该属性因此不建议使用。

11、ruby-base-container实验属性

​ 该属性值目前处于实验阶段还未被所有的浏览器完全支持目前只有Firefox和IE浏览器支持该属性因此不建议使用。

12、ruby-text-container实验属性

​ 该属性值类似于HTML的<rtc>元素。

​ 该属性值目前处于实验阶段还未被所有的浏览器完全支持目前只有Firefox和IE浏览器支持该属性因此不建议使用。

六、元素显示类

​ 该类型的属性值用于设置元素及其后代元素在页面上的显示问题。

1、none

​ 该属性值用于设置元素及其后代元素在页面上不显示并且不占据页面空间但是元素的dom结构是存在的只是不显示。Vue中的v-show语法糖就是基于该属性实现的。

​ 如果想让元素占据空间但是不显示应该使用visibility或者opacity属性实现。

demo示例
  <div class="div1" style="display: none;">
    这是第一个div
  </div>
  <div class="div2">
    这是第二个div
  </div>
页面效果

在这里插入图片描述

2、contents

​ 该属性值用于设置元素本身不显示但其内部文本、伪元素和后代元素正常显示。但是该属性并不建议使用不符合大部分浏览器的规范要求。

demo示例
<div class="div2" style="display: contents;background: yellow;">
    这是第二个div
    <div style="background: #ccc;">
      这是第二个div的子元素
    </div>
</div>
页面效果

在这里插入图片描述

七、预组合类

​ 该类型的属性值用于设置元素同时具有两种属性值的效果效果类似于两者的结合。

1、inline-block

​ 该属性值用于设置元素类型为行内块元素既可以像inline元素与其他行内元素放在同一行又可以像block元素一样设置宽高、边距等属性。

2、inline-table

​ 该属性值用于设置元素类型为行内表格元素既可以设置元素内部为表格布局又可以像inline元素与其他行内元素放在同一行。

​ 除了与其他行内元素放在同一行之外其余特性与table属性值相同。

3、inline-flex

​ 该属性值用于设置元素类型为行内flex元素既可以设置元素内部为flex布局又可以像inline元素与其他行内元素放在同一行。

​ 除了与其他行内元素放在同一行之外其余特性与flex属性值相同。

4、inline-grid

​ 该属性值用于设置元素类型为行内网格元素既可以设置元素内部为grid网格布局又可以像inline元素与其他行内元素放在同一行。

​ 除了与其他行内元素放在同一行之外其余特性与grid属性值相同。

demo示例
<style>
    .div1 {
      display: inline-block;
      width: 150px;
      height: 50px;
      background: red;
    }
    .div2 {
      display: inline-table;
      width: 150px;
      height: 50px;
      background: yellow;
    }
    .row {
      display: table-row;
    }
    .cell {
      display: table-cell;
    }
    .div3 {
      display: inline-flex;
      width: 150px;
      height: 50px;
      background: pink;
    }
    .div4 {
      display: inline-grid;
      width: 150px;
      height: 50px;
      background: green;
    }
</style>

  <div>
    <div class="div1">
      这是设置inline-blick的div
    </div>
    <div class="div2">
      <div class="row">
        <div class="cell">这是设置inline-table的div</div>
      </div>
    </div>
    <div class="div3">
      这是设置inline-flex的div
    </div>
    <div class="div4">
      这是设置inline-grid的div
    </div>
  </div>
页面效果

在这里插入图片描述

八、双值语法

​ dispaly属性也支持部分双值语法但目前不常用效果与预组合类相同更建议使用预定类。更多内容请查看display的双值语法。

1、inline flex

​ 等同于 inline-flex。

2、inline table

​ 等同于 inline-table。

3、inline grid

​ 等同于 inline-grid。

其他。。。

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: CSS
返回列表

上一篇：基于百度API的车牌识别计费系统-CSDN博客

下一篇：【数据仓库】hadoop生态圈与数据仓库-CSDN博客

“CSS 之 display属性详解-CSDN博客” 的相关文章

大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS_网页设计代码模板1年前 (2023-02-02)
web应用——CSS1年前 (2023-02-02)
CSS知识梳理1年前 (2023-02-02)
python爬虫学习笔记-CSS(大致了解)1年前 (2023-02-02)
css层叠性和继承性1年前 (2023-02-02)
css实现超出div长度文字自动隐藏或用省略号表示1年前 (2023-02-03)
CSS-@规则(At-rules)常用语法使用总结1年前 (2023-02-03)
html+css网页练习二1年前 (2023-02-04)
webpack项目css插件压缩等步骤1年前 (2023-02-05)
元宵节：css画灯笼1年前 (2023-02-05)

阿里云国际版