js的几种布局方式

1. 盒模型布局（Box Model Layout）：使用CSS盒模型来进行布局，通过设置元素的宽度、高度、内边距和外边距等属性来调整布局。这是最基本的布局方法，可通过CSS的display属性来控制元素的布局方式（如块级元素、行内元素等）。

2. 流式布局（Flow Layout）：也称为自适应布局，它使用CSS的流式布局特性，使元素根据窗口或父容器的大小自动调整位置和大小。常用的技术包括使用百分比和max-width、min-width属性来设置元素的宽度，并使用float和clear属性来控制元素的排列方式。

3. 弹性盒子布局（Flexbox Layout）：使用CSS的弹性盒子布局特性，通过设置容器的display: flex来创建一个弹性容器，然后使用flex-direction、justify-content、align-items等属性来控制子元素的排列和对齐方式。这种布局方法非常灵活且响应式，适用于各种复杂的布局需求。

4. 网格布局（Grid Layout）：使用CSS的网格布局特性，通过将元素放置在网格容器中，并定义行和列的大小和位置来进行布局。可以使用grid-template-columns、grid-template-rows等属性来设置网格的结构，使用grid-column、grid-row等属性来控制元素放置在网格中的位置。

5. 响应式布局（Responsive Layout）：这种布局方法旨在根据设备的屏幕尺寸和方向调整页面的布局和样式。可以使用媒体查询（Media Queries）来根据不同的视口宽度应用不同的CSS规则，使页面布局适应各种屏幕尺寸。