css中display属性有哪些值

CSS的display属性是控制元素盒子模型的一个重要属性，它可以影响元素的显示类型、尺寸、位置等多个方面。目前，CSS的display属性共有13个值，其中有些值可以组合使用。本文将从多个角度分析CSS的display属性。

一、display属性值的分类

从显示类型的角度，display属性值可分为：

1.块级元素

块级元素是指在网页中以块状的形式展现的元素，它们在页面上占据一整行，可以设置width和height属性，但不能设置水平方向的margin和padding。display属性的块级元素值有：block、list-item、table、table-caption、table-cell、table-column、table-row、table-row-group、table-header-group、table-footer-group。

2.行内元素

行内元素是指在网页中以行内的形式展现的元素，它们只占用必要的宽度，不能设置width、height、margin、padding等属性，但可以设置前后的padding和margin，多个元素会在同一行展示。display属性的行内元素值有：inline、inline-block、inline-table。

3.行内块元素

行内块元素是指在网页中同时具有行内和块状特点的元素，它们只占据必要的宽度，但可以设置width、height、margin、padding等属性，并可以放在一行中展示多个元素。display属性的行内块元素值有：inline-block。

二、display属性值的作用

从元素排版的角度，display属性值的作用有：

1.控制元素布局

display属性值可以控制元素是块级元素还是行内元素，从而达到控制元素排布的效果。

2.控制元素尺寸

display属性值可以影响元素的尺寸，例如表格元素可以使用table-layout属性控制它的宽度。

3.控制元素隐藏

display属性可以将元素隐藏，例如将display属性设置为none就可以将元素隐藏。

三、display属性和CSS盒子模型

CSS盒子模型有两种：标准盒模型(浏览器渲染)和IE盒模型。标准盒模型(浏览器渲染)的width和height属性值分别表示content width、content height，而IE盒模型的width和height属性值表示border、padding、content的总宽度和总高度。通过设置display属性，可以影响盒子模型的计算，例如inline-block元素使用标准盒模型，而IE5和IE6使用在宽度计算时使用IE盒模型。

四、display属性和浏览器兼容性问题

一些老旧的浏览器对于display属性的支持不够完善，例如display:inline-block在IE6及以下版本中不被完全支持，需要设置行内元素的zoom属性或使用IE样式hack等方法来解决兼容性问题。