如何使用CSS为无文本内容的语义化HTML元素设置全屏宽度样式以展示页面基础结构

Hey there! 我完全get到你的需求——想要一个用彩色色块展示HTML语义化骨架的页面，不用填实际内容，就能直观看到页面的基础布局结构对吧？咱们来把你现有的代码完善一下，实现那种全屏彩色条的效果～

首先得解决两个核心问题：一是你现在用的#wrapper限制了宽度为500px，这会让元素没法撑满全屏；二是无文本内容的元素默认高度为0，所以咱们得给这些语义化标签设置固定高度，才能看到色块。

下面是完整的实现代码，直接用就能得到你想要的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic Layout Skeleton</title>
    <style>
        /* 重置浏览器默认样式，避免边距干扰全屏效果 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 头部区块 */
        header {
            background-color: #2ecc71;
            width: 100%;
            height: 80px;
        }

        /* 导航栏区块 */
        nav {
            background-color: #3498db;
            width: 100%;
            height: 40px;
        }

        /* 主内容容器，用flex实现侧边栏和主内容并排 */
        main {
            display: flex;
            width: 100%;
            min-height: 400px;
        }

        /* 主内容区域 */
        section {
            background-color: #f1c40f;
            flex: 3; /* 占3份宽度 */
        }

        /* 侧边栏区域 */
        aside {
            background-color: #e67e22;
            flex: 1; /* 占1份宽度 */
        }

        /* 页脚区块 */
        footer {
            background-color: #9b59b6;
            width: 100%;
            height: 60px;
        }
    </style>
</head>
<body>
    <header></header>
    <nav></nav>
    <main>
        <section></section>
        <aside></aside>
    </main>
    <footer></footer>
</body>
</html>

我来给你拆解一下关键设置：

• 先用通配符选择器*重置了所有元素的默认margin和padding，还设置了box-sizing: border-box，这样元素的内边距和边框不会额外撑开宽度，保证全屏效果精准。
• 给每个语义化标签（header、nav、section等）都设置了固定高度，这样就算没有文本内容，色块也能正常显示出来。
• main容器用了flex布局，让section和aside横向排列，模拟了常见的“主内容+侧边栏”结构，你可以通过调整flex的值来改变两者的宽度比例。
• 去掉了之前的#wrapper限制，让所有元素默认撑满整个视口宽度，完美实现全屏色块的效果。

如果想要适配移动端，还可以加个媒体查询，在小屏幕下让侧边栏移到主内容下面：

@media (max-width: 768px) {
    main {
        flex-direction: column;
    }
    aside {
        height: 150px;
    }
}

这样不管是桌面端还是移动端，都能清晰展示页面的语义化结构啦～

备注：内容来源于stack exchange，提问作者David Buddrige