display有哪些值?说明他们的作用?

简介: display有哪些值?说明他们的作用?

display解析:

display 属性用于控制元素的外部盒模型(外观)以及元素在文档中的布局。它有多个不同的值,每个值都会影响元素的呈现方式和行为。以下是一些常见的 display 属性值以及它们的作用:

  1. block(块级元素):
  • 作用:将元素呈现为块级元素,通常会在新行上开始,并占据其父容器的整个宽度。块级元素可以包含其他块级元素或内联元素。
  • 示例<div>, <p>, <h1>
  1. inline(内联元素):
  • 作用:将元素呈现为内联元素,不会开始新行,并仅占据其内容所需的宽度。内联元素通常用于包装文本和其他内联元素。
  • 示例<span>, <a>, <strong>
  1. inline-block:
  • 作用:结合了块级元素和内联元素的特性,元素在一行内排列,但仍可以设置宽度和高度。
  • 示例:使用display: inline-block可以创建水平排列的按钮或导航元素。
  1. flex(弹性布局):
  • 作用:使用Flexbox布局模型,允许元素在容器内灵活排列,以实现响应式设计和自适应布局。
  • 示例<div>元素可以设置为display: flex以创建Flex容器。
  1. grid(网格布局):
  • 作用:使用CSS Grid布局模型,将元素划分为网格,允许精确控制元素在容器内的位置和布局。
  • 示例<div>元素可以设置为display: grid以创建Grid容器。
  1. none:
  • 作用:隐藏元素,不会在页面上显示,但文档中的结构仍然存在。这可用于通过JavaScript来控制元素的显示和隐藏。
  • 示例:通常通过JavaScript设置display: none来隐藏元素。
  1. table(表格元素):
  • 作用:将元素呈现为表格元素,包括表格、表头、表体和表尾。这可用于模拟表格结构。
  • 示例<table>, <tr>, <td>
  1. table-cell(表格单元格):
  • 作用:将元素呈现为表格单元格,可以在表格内自由排列,类似于display: inline-block
  • 示例<td>
  1. table-row(表格行):
  • 作用:将元素呈现为表格行,可以在表格内自由排列,类似于display: inline-block
  • 示例<tr>
  1. list-item(列表项):
  • 作用:将元素呈现为列表项,通常与<ul><ol>元素一起使用。
  • 示例<li>
  1. initial:
  • 作用:将元素的 display 属性重置为初始值,根据元素类型的不同,可能是 blockinline
  • 示例display: initial
  1. inherit:
  • 作用:将元素的 display 属性继承自其父元素,从而采用父元素的 display 属性值。
  • 示例display: inherit

详细解释各个 display 属性值的作用:

  1. block(块级元素):块级元素通常用于创建页面的主要结构,如段落、标题、div等。它们会在新行上开始,并占据整个可用宽度。块级元素的主要作用是创建页面的主要布局,它们可以包含其他块级元素和内联元素。
  2. inline(内联元素):内联元素通常用于包装文本和其他内联元素,它们不会在新行上开始,仅占据它们的内容所需的宽度。内联元素常常用于创建文本链接、强调文本等。
  3. inline-blockinline-block 元素结合了块级元素和内联元素的特性,它们在一行内排列,但可以设置宽度和高度。这允许创建水平排列的按钮、图像、导航元素等。
  4. flex(弹性布局)display: flex 允许使用Flexbox布局模型,以创建自适应和响应式的页面布局。通过定义Flex容器和其子元素之间的关系,可以实现水平和垂直居中、自适应列布局等复杂布局。
  5. grid(网格布局)display: grid 允许使用CSS Grid布局模型,将元素划分为网格,以实现高度灵活的布局。它适用于复杂的多列布局、定位元素等。
  6. nonedisplay: none 用于隐藏元素,它不会在页面上显示,但文档结构仍然存在。通常通过JavaScript来控制元素的显示和隐藏。这对于实现交互和动态页面非常有用。
  7. table(表格元素)display: table 可以将元素呈现为表格元素,包括表格
相关文章
|
JavaScript
js通过input框输入属性和值,改变div的属性
js通过input框输入属性和值,改变div的属性
119 0
|
JavaScript
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
问题原因:多个tabs共用一个实体,动态显示隐藏列 出现了固定在右侧的列(fixed="right")错位 【解决方案】 表格的重新布局,只要table数据发生变化的时候就重新渲染表格 ```js this.$nextTick(() => { this.$refs.formname.doLayout() }) ``` 参考element官方文档 ![请在此添加图片描述](https://developer-private-1258344699.cos.ap-guangzhou.myqcloud.com/column/article/5877188/20231030-e40
248 0
element-UI el-table动态显示隐藏列造成固定一侧的列(fixed=“left/right“)错误显示
|
13天前
|
前端开发 JavaScript UED
在 max-height 属性的使用过程中有哪些需要注意的地方?
【10月更文挑战第27天】在使用`max-height`属性时,需要充分考虑其与其他属性的配合、对布局和内容显示的影响、兼容性问题以及在响应式设计和动态内容处理中的特殊情况等,通过合理的设置和调整,以实现预期的页面布局效果和良好的用户体验。
|
2月前
|
前端开发
前端基础(十二)_overflow属性、clear属性、vertical-align属性
本文详细介绍了CSS中的overflow属性、clear属性和vertical-align属性的用法和效果,并通过实例展示了如何控制元素内容溢出时的显示方式、清除浮动以及对齐行内元素和行内块元素。
62 1
|
1月前
|
JavaScript 前端开发 Java
input 的 name 属性的作用?
input 的 name 属性的作用?
42 0
|
1月前
|
JavaScript 前端开发 Java
input 的 name 属性的作用?(总结)
input 的 name 属性的作用?(总结)
52 0
|
2月前
|
前端开发 小程序 开发者
小程序的前端 display 有什么类型?
【9月更文挑战第4天】小程序的前端 display 有什么类型?
63 4
|
4月前
|
C#
C#中使用IntPtr.Size属性来判断当前系统是32位还是64位
这段代码首先检查 `IntPtr.Size`的值,如果是4,则输出"当前系统是32位";如果是8,则输出"当前系统是64位";如果都不是,就输出"未知系统位数"。
59 0
|
6月前
|
存储 C++ 容器
在C++的set的作用类型
在C++的set的作用类型
36 0
|
6月前
|
缓存 JavaScript 前端开发
通过id给input框和div赋值,修改属性值。
通过id给input框和div赋值,修改属性值。
142 0
通过id给input框和div赋值,修改属性值。