如何在CSS布局上测试网页设计师？

Question

表格已被用于设计网站很长一段时间。然而，即使在今天，随着众多浏览器的出现，许多兼容性和可访问性问题也浮出水面。必须解决所有这些问题，以确保网站对所有用户完全正常运行，包括那些使用备用浏览器的网站。

在与表相关的众多问题中，最令人不安的是（对于用户和Web开发人员）浏览器兼容性。在当今最常见的浏览器中，我们看到Internet Explorer，Netscape，Opera和Mozilla。但是，市场上每种都有几个版本。这意味着应该在尽可能多的版本上测试网站，以获得准确的兼容性分析。

因此，如果网页设计师说他知道基于CSS的布局，

• 如何在css布局上测试网页设计师？
• 他必须能够在css布局上回答哪些问题？

Answer 1

你在招人吗？

我会问他以下问题

• 如果他知道填充，保证金，悬停 ......以及类似的小而重要的事情。
• 我会问他是否可以只使用“div”来设计布局，无论情况如何（2,3，X列都是）。
• 我会检查他是否知道 CSS box ，链接设计，列表菜单等技术。
• 他必须知道如何使用选择器。
• 他应该知道如何定位IE或其他浏览器（或者他将无法修复错误）。
• 他应该知道如何使用 Firebug或类似工具。

Answer 2

• 问：position: absolute绝对与 相关的元素定位？

  A：最近定位的容器，即使它位于相对位置。很多人似乎都相信文档正是这里的答案

• 问：除了z-index之外，哪些因素会影响元素在重叠时如何叠加？

  答：它们出现在DOM中的顺序，而且，关键的是，绝对定位的元素将始终出现在未绝对定位的元素之上。对于跨浏览器兼容性点，受访者还可能指出，在IE6中，某些元素（如select）将在所有其他元素上可见。在许多浏览器中，嵌入式元素（如flash文件）也很常见。

• 问：什么是块元素，而不是内联元素？你能对这两种类型的相对外观有什么看法？

  A：格式化整个段落的元素，而不是文本范围。示例包括h1，div，p。默认情况下，块元素在其周围有一些边距，除非指定或浮动，否则将采用100％宽度。内联元素的宽度不能分配。

• 问：元素和周围元素如何受浮动影响？

  答：块元素不会分配超出绝对要求的宽度。如果有可用空间允许，元素将并排显示，而不是在下方。 除非clear编辑，否则该元素不会在其容器中分配任何高度。这个Q的替代方案是简单地询问clear做什么。这是我想从答案中得到的主要内容，因为我注意到很多人没有以准确的方式使用clear，并且它可以导致以非常混乱的方式解决简单的问题。

我还要求受访者解释盒子模型。

Answer 3

您通常只想检查他的投资组合（每个网站设计者都应该拥有）。如果它对大多数布局部分使用div（不使用表格就像使用它们一样错误）并且他的CSS使用w3c验证器验证他应该没问题。

如果您真的想提出具体问题，可以使用：

- difference between "display: block" and "display: inline"
- what is hasLayout
- how to create a 3-column layout with left and right bar fixed size
- how to center an object to the middle of the page (vertical and horizontal)
- difference of mozilla and IE border model and meaning of width and height (afair in IE elements have a width of width + border, for mozilla the width includes the border)

我不是网页设计师，我只需要进行比我想要的更多的网页布局，但这些问题应该涵盖基本部分。

但是：网页设计师的工作是创建一个好看的页面，而不是CSS /（X）HTML验证页面。如果页面在所有浏览器中看起来都很好，没有人应该关心他是否使用了表格或div（除非他使用表格来处理所有内容），因为有时候表格使得工作变得更容易，并且不会占用div的灵活性。