• 不断学习才有回报,学无止境!

display属性的用法总结

DIV+CSS技巧发现 箭翎 777次浏览 0个评论 扫描二维码

display
属性规定元素应该生成的框的类型。

说明

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML
等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML
没有内置的这种层次结构,所有 display 是绝对必要的。

注释:CSS2
中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。

默认值:inline
继承性:no
版本:CSS1
JavaScript 语法:object.style.display=”inline”

实例

使段落生出行内框:p.inline
{
display:inline;
}

浏览器支持

所有主流浏览器都支持 display 属性。
注释:如果规定了 !DOCTYPE,则 Internet
Explorer 8 (以及更高版本)支持属性值
“inline-table”、”run-in”、”table”、”table-caption”、”table-cell”、”table-column”、”table-column-group”、”table-row”、”table-row-group”、以及”inherit”。

可能的值

描述
none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block行内块元素。(CSS2.1 新增的值)
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
compactCSS 中有值 compact,不过由于缺乏广泛支持,已经从
CSS2.1 中删除。
markerCSS 中有值 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
属性的值。

箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明display属性的用法总结
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址