code前端网css网页布局显示属性最全总结
显示属性在网页布局中很常见，但往往只用到block、inline-block、inline和none等几个属性值。本文将详细介绍display属性不同方面
定义
display属性用于指定元素创建的字段类型，这会影响其显示方式
值：无|排队|块|内联块 |列表元素 |二手 |表|内联表 |表行组 |表格标题组 |表格页脚组 |表格行|表列组 |表格列 |表格单元格 |表格标题 |继承
初始值：内联
适用于：所有元素
继承：无
【注】IE7浏览器不支持table类属性值，继承
分类
块
【功能】
[1]不设置宽度时，宽度等于父元素的宽度
[2]占用一行
[3 ] 支持宽度和高度
[标签]
<address><article><aside><blockquote><body><dd><details><div><dl><dt><fieldset><figcaption><figure><footer><form><h1><header><hgroup><hr><html><legend><menuitem><nav><ol><optgroup><option><p><section><summary><ul>
[注意]菜单项标签仅在 Firefox 支持中可用
【不支持的样式】
[1]vertical-align
inline
【功能】
[1]内容扩展宽度
[2]非独占单行
[3]不支持宽度和高度
[4]代码换行符被分成空格
[标签]
<a><abbr><area><b><bdi><bdo><br><cite><code><del><dfn><em><i><ins><kbd><label><map><mark><output><pre><q><rp><rt><ruby><s><smap><small><span><strong><sub><sup><time><u><var><wbr>
[不支持的样式]
[1] 背景位置
[2]清除
[3]拍摄
[4]高度 |最大高度|最小高度
[5]宽度 |最大宽度|最小宽度
[6]溢出
[7]文本对齐
[8]文本缩进
[9]文本溢出
内联块
【功能】
[1] 不设置宽度时，内容扩展宽度
[2] 非独占单行
[3] 支持宽度和高度
[4] 代码行
[Tag]
<audio><button><canvas><embed><iframe><img><input><keygen><meter><object><progress><select><textarea><video>
需要注意的是，这里所说的inline-block元素是指其具有inline-block特性，而不是其默认值为display:inline-block
如果默认值为 Baseline，只有表单元素才是清晰的块内联元素，sound、canvas、iframe、img、keygen、object、video 应被视为内联元素
[不支持的样式]
[1]clear
【 【兼容IE】
IE7-浏览器不支持设置块级元素的内联块样式。解决办法如下：先改成内联元素，利用内联元素的特性，然后触发haslayout具有块级元素的特性，这样就可以模拟inline-block的效果了
div{
display:inline-block;
*display: inline;
zoom: 1;【注】连续元素块底部的间隙问题移动到这里
ni
【功能】
隐藏元素并远离文档流
【标签】
<base><link><meta><title><datalist><dialog><param><script><source><style>
列表项
【功能】
[1] 不设置宽度时，宽度填满一行
[2] 单行
[3] 支持宽度和高度
run-in
run -in 是一个有趣的块/内联混合体，它允许某些块级元素成为下一个元素的内联部分。如果一个元素创建了一个启动字段，并且该字段后跟一个块级字段，则启动元素将成为块级字段开头的内联字段，并且启动字段将被格式化为另一个元素内部的字段。 ，但它们仍然继承文档中父元素的属性
[注]只有 safari 和 IE8+ 支持
<h3 style="display:run-in">run-in test</h3> <p>paragraph</p>
如果 intro 字段后面没有跟块级字段，那么 intro 字段本身就会成为块-级别字段
<span style="display:run-in">run-in test</span> <span>paragraph</span>
表格元素
table{display: table;}
thead{display: table-header-group;}
tbody{display: table-row-group;}
tfoot{display: table-footer-group;}
tr{display: table-row;}
td,th{display: table-cell;}
col{display: table-column;}
colgroup{display: table-column-group;}
caption{display: table-caption;}表格元素有多种显示类型。
| 、 | 、下四个标签对应的显示属性
table【功能】 [1] 不设置宽度时，宽度为内容拉伸 [2] 独占行 [3] 支持宽度和高度 [4] 默认具有表格功能，可设置表格布局、边框折叠、边框间距等表格特定属性 【注】如果是在具有单独边框的模型中，则可以设置边框和填充来显示表格和内联表格，即 border-collapse:separate;;如果模型中有折叠边框，即 border-collapse:collapse，则只能设置边框
inline-table【功能】 [1] 当宽度为不设置，宽度根据内容扩展 [2] 非独占单行 [3] 支持宽度和高度 [4] 默认具有表格特性，可设置表格布局，边距折叠、边距间距和其他属性，特定于表格
table-cell【功能】 [1] 不设置宽度时，宽度随内容拉伸 [2] 非独占单行 [3] 支持宽度和高度 [4] 垂直alignment [ 5 ]同层同高 [注]屏幕：表格单元格元素不能设置margin，但可以设置padding
table-caption[功能] [1] 无设置 设置宽度后，宽度随内容扩展 [2] 占一行 [3] 支持宽度和高度 [注] 边距和显示偏移：table-caption可以设置元素
注意【1】如果元素是绝对定位元素，则浮点值设置为零。对于浮动元素或者绝对定位元素，计算值由声明值决定
【2】对于根元素，如果声明值插入table或者table中，将会得到一个计算值表。当声明为none时，将获得与none相同的计算值。所有其他显示的值都作为一个块进行计算。 |
|---|
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。