CSS Layout Hack：轻松用不同颜色查看网站层次

在你日常浏览网页的时候，有没有想过能不能用一种简单的方法来查看网站的布局层次呢？尤其是当你在调试网页的时候，想要快速识别出各个元素的边界和位置。今天，我就来分享一个CSS的小技巧，让你可以用不同颜色轻松查看网站的各个层次。

什么是CSS Layout Hack？

CSS Layout Hack其实就是利用CSS的样式属性，为网页中的不同元素设置背景颜色。通过这种方法，我们可以直观地看到网页中各个元素的边界和层次关系。这样一来，无论是调试还是优化页面布局，都变得更加简单和高效。

如何实现？

实现这个小技巧非常简单，只需要几行CSS代码。我们可以为不同的HTML元素设置不同的背景颜色，这样就能在浏览器中清晰地看到它们的布局层次。

    css
    /* 为常见的HTML元素设置不同的背景颜色 */
body {
    background-color: #f0f0f0; /* 背景灰色 */
}

header, footer {
    background-color: #ffcccb; /* 浅红色 */
}

nav {
    background-color: #add8e6; /* 浅蓝色 */
}

main {
    background-color: #90ee90; /* 浅绿色 */
}

aside {
    background-color: #fffacd; /* 浅黄色 */
}

section {
    background-color: #d3d3d3; /* 浅灰色 */
}

article {
    background-color: #ffebcd; /* 浅杏色 */
}