\n \n

\n ```\n ```css\n .aspect-ratio-box {\n width: 100%;\n position: relative;\n padding-top: 56.25%; /* 16:9 的长宽比，9/16 = 0.5625，即 56.25% */\n }\n .aspect-ratio-box > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n ```\n - 在这个例子中，设置了一个容器元素，通过`padding-top`为`56.25%`实现了 16:9 的长宽比。容器内的子元素通过绝对定位填充整个容器。\n\n**二、使用伪元素和`vw`单位实现**\n\n1. 原理：\n\n - 利用伪元素`::before`或`::after`，并设置其`content`属性为空，通过设置其`height`或`width`为相对于视口宽度（`vw`单位）的百分比来实现固定长宽比。\n\n2. 示例代码：\n ```html\n

\n \n

\n ```\n ```css\n .aspect-ratio-box-vw {\n width: 100%;\n position: relative;\n }\n .aspect-ratio-box-vw::before {\n content: \"\";\n display: block;\n padding-top: 56.25%; /* 16:9 的长宽比 */\n }\n .aspect-ratio-box-vw > * {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n ```\n - 这个方法与第一种类似，但是使用了伪元素和`padding-top`相对于视口宽度的特点来实现长宽比。\n\n**三、使用 CSS Grid 实现**\n\n1. 原理：\n\n - 通过 CSS Grid 布局，设置一个网格容器，并定义其中一个维度的大小，然后让另一个维度自动填充以实现固定长宽比。\n\n2. 示例代码：\n ```html\n

\n \n

\n ```\n ```css\n .aspect-ratio-grid {\n width: 100%;\n height: 0;\n padding-bottom: 56.25%; /* 16:9 的长宽比 */\n display: grid;\n }\n .aspect-ratio-grid > * {\n grid-row: 1;\n grid-column: 1;\n }\n ```\n - 在这个例子中，设置容器的`padding-bottom`为`56.25%`来实现 16:9 的长宽比，然后使用 CSS Grid 布局将子元素放置在网格的第一个单元格中。\n","reactions",{"_54":163,"_164":141,"_165":141,"_166":141,"_167":141,"_168":141,"_169":141,"_170":141,"_171":141,"_172":141},"https://api.github.com/repos/pro-collection/interview-question/issues/1032/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/1032/timeline","performed_via_github_app","state_reason","score",{"_54":179,"_56":57,"_58":180,"_60":181,"_62":182,"_64":183,"_66":184,"_68":185,"_70":186,"_72":187,"_74":188,"_107":189,"_120":121,"_122":26,"_123":-5,"_124":197,"_126":198,"_148":141,"_142":200,"_144":201,"_147":-5,"_151":152,"_153":202,"_158":-5,"_159":203,"_161":204,"_173":206,"_175":-5,"_176":-5,"_177":133},"https://api.github.com/repos/pro-collection/interview-question/issues/1031","https://api.github.com/repos/pro-collection/interview-question/issues/1031/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1031/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1031/events","https://github.com/pro-collection/interview-question/issues/1031",2615628500,"I_kwDOJGDC6c6b51LU",1031,"HTML 中有哪些语义化标签【热度: 32】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[190],{"_66":191,"_68":192,"_54":193,"_113":194,"_115":195,"_117":26,"_118":196},5312047129,"LA_kwDOJGDC6c8AAAABPJ9oGQ","https://api.github.com/repos/pro-collection/interview-question/labels/web%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF","web应用场景","EA4E1E","应用场景类问题",[],{"_54":128,"_64":129,"_58":130,"_66":131,"_68":132,"_70":133,"_72":134,"_118":135,"_136":199,"_138":139,"_140":141,"_120":121,"_142":143,"_144":145,"_146":-5,"_147":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2024-10-26T07:32:49Z","2024-10-26T07:32:50Z",{"_155":141,"_156":141,"_157":141},"**关键词**：html 语义化标签\n\n在 HTML 中，语义化标签是具有明确含义的标签，它们可以更好地描述网页的结构和内容，提高代码的可读性、可维护性以及对搜索引擎的优化。以下是一些常见的语义化标签：\n\n**一、文档结构相关标签**\n\n1. `

`：\n\n - 定义文档的页眉部分，通常包含网站的标志、导航栏、搜索框等。\n - 例如：\n ```html\n

\n

My Website

\n \n

\n ```\n\n2. `