CSS3 display知识详解

在网页设计中，CSS的display属性扮演着极其重要的角色，它决定了元素如何以及是否在网页上显示。让我们深入理解一下各个值的功能和效果。

当我们将display属性设置为none时，该元素将被隐藏，就像它在网页上不存在一样，既不会占据空间也不会显示任何内容。与visibility属性的hidden值不同，它保留元素的物理空间。

接下来，我们来谈谈内联元素和块元素。当我们将一个元素的display属性设置为inline时，它将作为一个内联元素显示，这意味着它可以与其他内联元素并排显示，而不会像块元素那样独占一行。而当我们将display设置为block时，该元素将作为一个块元素显示，它会独占一行并在其前后生成“换行”。还有一些其他的值如inline-block，它结合了内联元素和块元素的特性。这种类型允许元素以内联的方式呈现但拥有块级元素的特性，如设置宽度和高度。

在CSS3中，一些新的属性值如flexbox和inline-flex被引入，它们允许开发者以更灵活和响应式的方式布局元素。这些属性值将对象作为弹性伸缩盒显示，提供了更高级的布局选项和控制。值得注意的是，这些新属性可能存在描述错误及变更，因此在实际使用中可能需要查阅的文档和指南。

最后需要注意的是，IE6和IE7这两个老版本的浏览器在支持inline元素转换成inline-block方面有限制。在非inline元素转换为inline-block时，需要先转换为inline，然后触发hasLayout以获得类似的效果。这为开发者在使用这些旧浏览器时带来了一定的挑战。