display的值及作用
display的值及作用
display
属性可以设置元素的内部和外部显示类型,元素的外部显示类型将决定该元素在流式布局中的表现,例如块级或内联元素,元素的内部显示类型可以控制其子元素的布局,例如grid
或flex
。目前所有浏览器都支持display
属性,但是对于属性值的兼容性仍需注意。
外部显示
这些值指定了元素的外部显示类型,实际上就是其在流式布局中的角色,即在流式布局中的表现。
display: none
display: none;
是CSS1
规范,无兼容性问题,该属性值表示此元素不会被显示,依照词义是真正隐藏元素,使用这个属性,被隐藏的元素不占据任何空间,用户交互操作例如点击事件都不会生效,读屏软件也不会读到元素的内容,这个元素的任何子元素也会同时被隐藏。当使用该属性将元素从显示状态切换为隐藏状态时,元素不占据原本的空间,会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的,他的任何不同状态值之间的切换总是会立即生效。这种方式产生的效果就像元素完全不存在,但在DOM
中依然可以访问到这个元素,也可以通过DOM
来操作它。
display: block
display: block;
是CSS1
规范,无兼容性问题,该属性值表示此元素将显示为块级元素,此元素前后会带有换行符,元素独占一行,封闭后自动换行,默认宽度为100%
,可以指定宽度和高度,内外边距对于四个方向有效。
display: inline
display: inline;
是CSS1
规范,无兼容性问题,该属性值表示此元素会被显示为内联元素,元素会生成一个或多个内联元素框,这些框不会在自身之前或之后产生换行符,在正常流中,如果有空间,则下一个元素将在同一行上,元素排在一行,封闭后不会自动换行,不能指定高度与宽度,可以使用line-height
来指定高度,外边距对于水平方向有效,垂直方向无效,内边距对于水平方向正常有效,垂直方向只有效果,对其他元素无任何影响。
display: inline-block
display: inline-block;
是CSS2
规范,无兼容性问题,该属性值表示此元素将显示为内联块元素,该元素生成一个块元素框,该框将随周围的内容一起流动,就好像它是单个内联框一样,与被替换的元素非常相似,它等效于内联流根inline flow-root
,可以指定宽度和高度,内外边距对于四个方向有效元素排在一行,但是在回车后会有空白缝隙。
display: run-in
display: run-in;
是CSS2
规范,绝大部分浏览器都不兼容,目前这是个实验性属性值,不应该用作生产环境,该属性值表示此元素会根据上下文决定对象是内联对象还是块级对象,如果它后一个元素是block
那么它会变成inline
并和后一个元素并排,如果它后一个元素是inline
那么它会变成block
。
内部显示
这些关键字指定了元素的内部显示类型,它们定义了该元素内部内容的布局方式,需要假定该元素为非替换元素。
display: flow-root
display: flow-root;
是CSS3
规范,兼容性一般,该属性值表示此元素会生成一个块元素盒子,该元素盒子可建立一个新的块格式化上下文BFC
,定义格式化根所在的位置。
display: table
display: table;
是CSS2
规范,兼容性良好,该属性值表示此元素会作为块级表格来显示,类似<table>
,表格前后带有换行符。
display: flex
display: flex;
是CSS3
规范,目前主流浏览器都已支持,是布局的首选方案,该属性值表示此元素会作为弹性盒子显示,在外部表现为block
,内部作为弹性盒子使用,弹性布局可以为盒状模型提供最大的灵活性。在兼容移动端浏览器的方案上,有可能需要使用display:-webkit-box;
,也就是内核前缀-box
,同样都是弹性盒子,由于各阶段草案命名的原因,其命名从box
更改为flex
,flex
是新的规范属性,此外flex
并不能完全替代box
,使用这两种方式在实际布局中会存在差异。
display: grid
display: grid;
是CSS3
规范,目前主流浏览器都已支持,该属性值表示将元素分为一个个网格,然后利用这些网格组合做出各种各样的布局。Grid
布局与Flex
布局有一定的相似性,都可以指定容器内部多个成员的位置。不同之处在于,Flex
布局是轴线布局,只能指定成员针对轴线的位置,可以看作是一维布局。Grid
布局则是将容器划分成行和列,产生单元格,然后指定成员所在的单元格,可以看作是二维布局。
display: inline-table
display: inline-table;
是CSS2
规范,兼容性良好,该属性值与display: table;
在元素内部表现相同,在元素外部显示表现为inline
。
display: inline-flex
display: inline-flex;
是CSS3
规范,目前主流浏览器都已支持,该属性值与display: flex;
在元素内部表现相同,在元素外部显示表现为inline
。
display: inline-grid
display: inline-grid;
是CSS3
规范,目前主流浏览器都已支持,该属性值与display: grid;
在元素内部表现相同,在元素外部显示表现为inline
。
display: list-item
display: list-item;
是CSS1
规范,无兼容性问题,该属性值表示将元素的外部显示类型变为block
盒模型,并将内部显示类型变为多个list-item inline
盒模型。
内部表现
table
布局模型有着相对复杂的内部结构,因此它们的子元素可能扮演着不同的角色,这一类关键字就是用来定义这些内部显示类型,并且只有在这些特定的布局模型中才有意义。
display: table-row-group
display: table-row-group;
是CSS2
规范,兼容性良好,该属性值表示此元素会作为一个或多个行的分组来显示,类似于<tbody>
。
display: table-header-group
display: table-header-group;
是CSS2
规范,兼容性良好,该属性值表示此元素会作为一个或多个行的分组来显示,类似于<thead>
。
display: table-footer-group
display: table-footer-group;
是CSS2
规范,兼容性良好,该属性值表示此元素会作为一个或多个行的分组来显示,类似于<tfoot>
。
display: table-row
display: table-row;
是CSS2
规范,兼容性良好,该属性值表示此元素会作为一个表格行显示,类似于<tr>
。
display: table-column-group
display: table-column-group;
是CSS2
规范,兼容性良好,该属性值表示此元素会作为一个或多个列的分组来显示,类似于<colgroup>
。
display: table-column
display: table-column;
是CSS2
规范,兼容性良好,该属性值表示此元素会作为一个单元格列显示,类似于<col>
。
display: table-cell
display: table-cell;
是CSS2
规范,兼容性良好,该属性值表示此元素会作为一个表格单元格显示,类似于<td>
和<th>
。
display: table-caption
display: table-caption;
是CSS2
规范,兼容性良好,该属性值表示此元素会作为一个表格标题显示,类似于<caption>
。
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.runoob.com/cssref/pr-class-display.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/display
https://blog.csdn.net/pedrojuliet/article/details/69062306
- HUST 1584 摆放餐桌
- HUST 1585 排队
- 【QQ/微信个人号变身机器人】炸群+远程监控个人PC的尝试
- HUST 1583 长度单位
- FZU 2167 大王叫我来巡山呐
- HDU 1021 Fibonacci Again
- Hadoop数据分析平台实战——180Oozie工作流使用介绍离线数据分析平台实战——180Oozie工作流使用介绍
- 博弈论及算法实现
- Hadoop数据分析平台实战——160Sqoop介绍离线数据分析平台实战——160Sqoop介绍
- HDU 2186 悼念512汶川大地震遇难同胞——一定要记住我爱你
- Hadoop数据分析平台实战——150Flume介绍离线数据分析平台实战——150Flume介绍
- Codeforces 714A Meeting of Old Friends
- Code forces 719A Vitya in the Countryside
- Hadoop数据分析平台实战——190Highcharts介绍离线数据分析平台实战——190Highcharts介绍
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法