html的display属性值,深入理解display属性_html/css_WEB-ITnose

【不支持的样式】

[1]background-position

[2]clear

[3]clip

[4]height | max-height | min-height

[5]width | max-width | min-width

[6]overflow

[7]text-align

inline-block

【特征】

[1]不设置宽度时，内容撑开宽度

[2]非独占一行

[3]支持宽高

[4]代码换行被解析成空格

【标签】

【不支持的样式】

[1]clear

[2]text-align

none

【特征】

隐藏元素并脱离文档流

【标签】

list-item

【特征】

[1]不设置宽度时，宽度撑满一行

[2]独占一行

[3]支持宽高

run-in

run-in是一个有意思的块/行内元素混合，可以使某些块级元素成为下一个元素的行内部分。如果一个元素生成run-in框，而且该框后面是一个块级框，那么该run-in元素将成为块级框开始处的一个行内框，run-in框格式化成另一个元素中的行内框，但它们仍从文档中的父元素继承属性

[注意]只有safari和IE8+支持

run-in test

paragraph

若run-in框后面不是块级框时，run-in框本身将成为块级框

run-in testparagraph

表格类元素

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;}

表格类元素的display共有以上几种，因为无法设置margin和padding用的较少，下面将着重介绍下、、、这四个标签对应的display属性

table

【特征】

[1]不设置宽度时，宽度由内容撑开

[2]独占一行

[3]支持宽高

[4]默认具有表格特征，可设置table-layout、border-collapse、border-spacing等表格专有属性

inline-table

【特征】

[1]不设置宽度时，宽度由内容撑开

[2]非独占一行

[3]支持宽高

[4]默认具有表格特征，可设置table-layout、border-collapse、border-spacing等表格专有属性

table-cell

【特征】

[1]不设置宽度时，宽度由内容撑开

[2]非独占一行

[3]支持宽高

[4]垂直对齐

[5]同级等高

table-caption

【特征】

[1]不设置宽度时，宽度由内容撑开

[2]独占一行

[3]支持宽高

注意事项

【1】如果一个元素是绝对定位元素，float的值设置为none，对于浮动元素或绝对定位元素，计算值由声明值确定

【2】对于根元素，如果声明为值inline-table或table，都会得到计算值table，声明为none时则会得到同样的计算值none，所有其他display值都计算为block

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！

合作方式

Copyright © 2004-2018 https://www.gxlcms.com/. All Rights Reserved.

豫ICP备19030742号