CSS2中display:table属性的用法详解
想必大家都已经知道了css属性display的一些常见属性值,比如none,block,inline-block等等,今日我在看一个效果代码的时候,碰到一个之前从未使用过的属性值,就是它了,display:table。随后从网上以及手册中搜索了一下它的具体用法,在此总结下来分享给大家,希望能对大家有所帮助~
我们都知道table是已经被W3C不再提倡使用的表格布局,所以大家可能猜到了,display:table就是与表格相关的显示方式,display的所有属性:
值 | 描述 |
---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
marker | CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。 |
table | 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。 |
inline-table | 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。 |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似 <thead>)。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。 |
table-row | 此元素会作为一个表格行显示(类似 <tr>)。 |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。 |
table-column | 此元素会作为一个单元格列显示(类似 <col>) |
table-cell | 此元素会作为一个表格单元格显示(类似 <td> 和 <th>) |
table-caption | 此元素会作为一个表格标题显示(类似 <caption>) |
inherit | 规定应该从父元素继承 display 属性的值。 |
使用CSS表格
CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如,“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素那样具有表格的特性。使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式,而不会产生因为使用了table那样的制表标签所导致的语义化问题。
兼容性
该属性在IE8以上以及Firefox,Chrome,Safari等浏览器上均可以支持,因为它本身也是个CSS2的属性。
CSS2中display:table属性的用法详解相关推荐
- 教程-Delphi中Spcomm使用属性及用法详解
Delphi中Spcomm使用属性及用法详解 Delphi是一种具有 功能强大.简便易用和代码执行速度快等优点的可视化快速应用开发工具,它在构架企业信息系统方面发挥着越来越重要的作用,许多程序员愿意选 ...
- CSS3中font-face属性的用法详解
CSS3中font-face属性的用法详解 @font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕 ...
- dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...
- Python 3.7.1 中 namedtuple 具名元组基本用法详解
Python 3.7.1 中 namedtuple 具名元组基本用法详解 转载请注明出处:https://blog.csdn.net/jpch89/article/details/84645251 文 ...
- mysql identity sql_SQL Server中identity(自增)的用法详解
一.identity的基本用法 1.含义 identity表示该字段的值会自动更新,不需要我们维护,通常情况下我们不可以直接给identity修饰的字符赋值,否则编译时会报错 2.语法 列名 数据类型 ...
- python的raw_ input是什么意思-对python中raw_input()和input()的用法详解
最近用到raw_input()和input()来实现即时输入,就顺便找了些资料来看,加上自己所用到的一些内容,整理如下: 1.raw_input() raw_input([prompt]) -> ...
- python中str和input_对python中raw_input()和input()的用法详解
最近用到raw_input()和input()来实现即时输入,就顺便找了些资料来看,加上自己所用到的一些内容,整理如下: 1.raw_input() raw_input([prompt]) -> ...
- js数组中foEach和map的用法详解 jq中的$.each和$.map
数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...
- python3 isinstance用法_对python中assert、isinstance的用法详解
1. assert 函数说明: Assert statements are a convenient way to insert debugging assertions into a program ...
最新文章
- ZJU-java进阶笔记 第七周(输入输出)
- Cassandra架构、设计(集群表)和性能报告
- hdu 4417 Super Mario 划分树+二分
- 使用final类的作用是什么?
- LLVM每日谈之十二 LLVM的源码分析之Pass相关
- php分析图片中水印的位置,图像处理技术之图片添加水印
- python无人机路径规划算法_快速拓展随机树(RRT)路径规划,python
- FCK添加远程图片自动下载
- kdj买卖指标公式源码_炒股秘籍——KDJ你所不知道的绝密用法(附指标公式源码)...
- 更改stata外部命令存放位置
- 数据工程师岗位职责解析
- 苹果鼠标右键怎么按_iPadOS 13.4 鼠标体验如何?附使用指南
- 小白带你学安卓——Intent
- 诺贝尔奖计算机二级,计算机二级ppt真题:制作介绍诺贝尔奖ppt
- 数学界的扫地僧们(转载)
- iconic 安装和使用
- 获取屏幕、当前网页和浏览器窗口的大小
- 利用python进行Landsat8数据的辐射定标
- 【字符集】字符集和编码知识【转】
- MFC程序调用Windwos CMD命令打印图片 MFC 控件显示层次调整,即(叠放次序)和绘制遮挡置于底层顶层灰色