7 个重要的 CSS 布局技巧

CSS 中最难搞定的事情就是网站的布局。这里有一些解决这个问题的技巧。其中一些技巧并不完全是新的，也不是火箭科学，但希望它们能在某个地方为某人省去一些麻烦！

提示 1：开始工作之前清除默认的内边距和边距设置。
不同的浏览器有不同的默认边距和填充大小，因此您需要从头开始。使用这个命令：

*
{
保证金：0;
填充：0;
边界：0;
}

清除所有默认边距和填充设置。另请注意边框，它设置为 0。请注意，如果您这样做，您还将摆脱可点击图像周围讨厌的紫色边框，尽管有些人认为紫色边框对于可访问性和可用性是必要的。但很多人不喜欢紫色边框的圆形图像，这是一种无需设置即可一举摆脱它的方法 图片边框=0 对于每个图像（在任何情况下这都违反严格的标记规则）。

提示 2：要使布局居中，请使用容器 div 来包含所有内容
声明如下：

＃容器

{
保证金：0自动;
宽度：xxxpx；
}

这里有几点需要注意。不要将宽度声明为 100%。这会破坏整个对象，因为您只需在容器内声明子元素，然后使用它们将它们居中 保证金：0 自动。这是非常糟糕的，因为这意味着您必须在容器中的每个元素的多个位置声明它，而不是声明一次中央布局。

技巧 3：自上而下工作
从字面上看，从设计中最顶层的元素以及 HTML 中的“顶部”元素（例如正文）以及主容器开始处理 CSS 布局。

在尽可能高的级别上声明你的CSS命令，并尝试只声明一次，然后让它级联起来。仅在绝对必要时才覆盖较低级别的命令。这可以防止出现难以维护和理解的冗长 CSS 文件。例如，如果您有 { 边距：0 自动} 容器内每个子 div 的设置 – 你有麻烦了。

技巧 4：记录您正在做的事情并使用 Firebug 和 Firefox 浏览器进行调试
你不只是为了自己编写 CSS 代码，有一天，一些可怜的家伙将不得不调试它。在 CSS 文件中添加大量注释来解释为什么要以特定方式执行操作。

适应这一点，你可能会发现自己必须比你想象的更频繁地修复别人的 CSS（甚至是你自己的 CSS）。使用 Firefox 的 Firebug 插件来调试 CSS。这是一个救星，可以让您准确地了解您的设计可能在哪里被破坏以及原因。

唯一的问题是您的设计可能在 Firefox 中完美运行，但在 IE5、IE6 或 IE7 中则不然。这给我们带来了下一个技巧。

提示 5：决定要为哪些浏览器构建 CSS 并从一开始就进行测试
一些纯粹主义者坚持确保您的网站适用于所有可能的浏览器，而其他人则只使其适用于“主要”浏览器。您如何确切知道哪些浏览器最常用？ W3 学校再次前来救援。

在以下页面上，您可以查看哪些浏览器最受欢迎：http://www.w3schools.com/browsers/browsers_stats.asp。从这个页面你可以看到像IE5这样的浏览器只被大约1.1%的浏览器使用。您是否认为值得构建与此浏览器兼容的 CSS，或者您是否只是要测试与 IE6、IE7 和 Firefox 的兼容性，这取决于您。无论您做什么，当您开始构建 CSS 时，请从顶部开始，并在进行过程中测试每个浏览器中的每个设置。没有什么比在 Firefox 中构建一个完美的网站，然后在编写 1000 行 css 文件后发现它在 IE6 中损坏更糟糕的了。事后调试和修复代码简直就是一场噩梦。

提示 6：这里有一个令人尴尬的小提示，用于修复 IE6 或 IE7 中的 CSS
假设您的设计在 Firefox 中完美运行，但在 IE6 中却被破坏了。您无法使用 Firebug 来确定问题可能出在哪里，因为它可以在 Firefox 中使用。您无法在 IE6 中使用 Firebug，那么如何调试 IE6 或 IE7 样式表呢？我经常发现它有助于添加 {边框：1 px 纯红色} or {边框：1 px 纯紫色} 到有问题的要素。通过这种方式，您通常可以了解为什么某些元素不适合可用空间。这是一个令人尴尬的小技巧，因为它是如此原始和简单，但它确实有效！

技巧 7：了解浮动
理解元素的浮动至关重要，特别是在让浮动元素在不同的浏览器中工作的情况下！

基本上，诸如 div 之类的元素会向左或向右浮动（从不向顶部或底部浮动，仅向侧面浮动）。以下是浮动元素需要考虑的一些事项。每个浮动元素必须指定明确的宽度。如果您使用浮动 div 创建 3 列或 2 列布局，请以百分比而不是固定宽度指定宽度，如果您确实使用百分比，请确保百分比之和不等于 100 %，这通常会导致最右边的列低于其余列，这清楚地表明您正在尝试将某些内容放入太宽的可用空间中。而是使用加起来略低于 100% 的百分比，例如左列、中列和右列的 25%、49%、24%。

浮动元素可能非常难以理解，值得花一些时间在提供具体指南和技巧的好网站上，例如 立场决定一切 网站。

结论
当您下次必须通过面板敲击无表格设计来提交时，这些 CSS 布局技巧有望为您节省一些时间和精力！这是克里斯汀·安德森 (Christine Anderssen) 撰写的客座文章。