📅 最后修改于: 2023-12-03 15:31:17.041000 🧑 作者: Mango
HTML 布局技术就是使用 HTML 元素和 CSS 样式来控制网站的布局和排版，使得网站能够呈现出合理的视觉效果和良好的用户体验。
HTML 布局方式主要有以下几种：
表格布局是最早期的网页布局方式，它适用于较为简单的页面，但是不适合用于复杂的页面布局。表格布局需要使用表格标签<table>、行标签<tr>和列标签<td>构建，可以对表格进行宽度调整、边框设置等操作，但是布局不够灵活，也不易于维护。
浮动布局是当前应用最广泛的布局方式之一，它通过设置元素的浮动属性来控制元素在文档流中的位置，实现不同元素的排版。浮动布局使用float属性来设置元素的浮动状态，可以使用clear属性来清除已浮动元素的影响。此外，浮动布局还可以结合使用position属性和z-index属性来实现元素的覆盖和层级。
弹性盒子布局（flexbox）是 CSS3 中新增加的一种布局方式，它主要为解决网页排版的水平和垂直方向的对齐问题而设计的。弹性盒子布局使用display: flex属性来将元素转换为一个弹性容器，可以通过flex-direction属性控制容器中元素的排列方向，并使用flex-wrap属性来控制容器的换行形式。此外，弹性盒子布局还可以使用justify-content属性和align-items属性来控制容器中元素在水平和垂直方向上的对齐方式。
网格布局（grid）是 CSS3 中新增加的一种二维布局方式，它使得网页中的元素可以以网格方式进行布局，并且可以控制每一行和每一列的大小和位置。网格布局使用display: grid属性来将元素转换为一个网格容器，可以使用grid-template-rows属性和grid-template-columns属性来设置容器中每一行和每一列的大小和位置，也可以使用grid-template-areas属性来定义网格的区域。
进行布局时，我们需要注意以下一些技巧：
在布局时，应尽量使用语义化标签来描述网页的结构和语义，而避免使用无意义的标签和属性。语义化标签可以使得网页的结构更加清晰，也更有利于 SEO。
在设置元素的尺寸和位置时，应尽可能使用相对单位（如 em、rem、% 等），而避免使用绝对单位（如 px、pt 等）。相对单位可以使得网页在不同屏幕大小和设备分辨率下都具有较好的兼容性。
在进行布局时，应尽可能利用 CSS 样式来简化布局，减少 HTML 代码的复杂度。如使用伪元素实现清除浮动、使用 flexbox 实现弹性布局等。