前端设计师需要了解的9个问题

深入了解块级元素与行内元素的区别

块级元素以其独特的属性占据了整个屏幕空间，无论其宽度如何设定，始终独占一行。这类元素能够轻松地管理边距和填充。与之相反，行内元素在水平方向上排列，其边距和填充属性仅限于水平方向，垂直方向上的填充虽然可以扩大元素面积，但无法增加与相邻元素之间的距离。

关于display的多种特性与IE的独特实现方式

在讨论display的多种特性时，我们不得不关注那些旧版IE浏览器（如IE6和IE7）。这些浏览器对某些显示属性支持有限。例如，为了实现display:inline-block的效果，我们需要巧妙地使用如vertical-align等属性来触发浏览器的特定布局机制。这一过程需要一些技巧性的调整和对特定浏览器的hack方法。值得注意的是，只有行内元素可以使用display:inline-block。

relative、absolute和float的影响

当我们为元素设置position:absolute或float属性时，这些元素会隐式地改变其display类型。无论元素原本是什么类型的显示模式，只要设置了上述任一属性，该元素都会以display:inline-block的方式显示。这一特性在IE6下的float属性使用中尤为明显，有时我们可以通过调整display属性来消除因float产生的双边距问题。而相对定位（position:relative）则不会改变元素的display类型。

文本和图片的水平居中技巧

要实现文本或图片的水平居中，有多种方法可供选择。对于行内元素，我们可以通过设置text-align:center来实现。对于已知宽度的块级元素，使用margin:0 auto是常见的方法。而对于不确定宽度的块级元素，我们可以采用一些巧妙的技巧，如将其放入table标签或使用display:inline转变为行内元素等。

垂直居中的多样方法

网格布局与子选择器的重要性

在现代网页设计中，网格布局扮演着重要的角色。在HTML中，同级元素的排列顺序往往反映了其在布局中的重要性。子选择器为我们提供了更多的布局选择，使我们可以根据个人偏好来定制网页结构。

Z轴的世界与select元素的特殊性质

除了熟悉的x和y轴，还有一个重要的Z轴。当元素设置了position属性为relative或absolute时，它们可以在Z轴上移动。z-index属性决定了元素在Z轴上的位置。值得注意的是，z-index只对非窗口的元素有效。在某些情况下，如使用flash或IE6下的select元素时，我们需要特别注意这一点。