1HTML布局主要有两种方式，一种是表格布局，一种是DIV布局2HTML表格布局是WEB10时代主要使用的布局方式，即使用TABLE标签进行布局，优点是布局比较简单3HTML DIV布局是WEB20时代主要使用的布局方式，优点是符合；抽空时间，打算学习下displayflex本以为就是一个小小的知识点，正式去研究的时候，才发现displayflex有很多内容，能实现很多效果比如三栏布局左右两栏固定，中间栏自适应，圣杯布局后来想着经常听到流式布局，自；1静态布局 给页面元素设置固定的宽度和高度，单位用px窗口发生变化时，会出现滚动条，内容会被遮挡优点简单方便，不存在兼容问题缺点网页无法根据用户设备屏幕的宽度进行自适应2流式布局 也叫100%布局宽度；1流式布局Fluid 流布局与固定宽度布局基本不同点就在于对网站尺寸的侧量单位不同固定宽度布局使用的是像素，但是流布局使用的是百分比，这位网页提供了很强的可塑性和流动性换句话说，通过设置百分比，我们不需要考虑。

比如采用静态布局的侧边栏，而采用流式布局的主区域 上面也讨论过流式布局和弹性布局不适合尺寸跨度太大的屏幕所以基本上采用有限的最大最小拟合尺寸，在拟合范围内，采用流式布局或者弹性布局进行拟合如果超出适应范围，就会变成静态布；流式布局是移动web开发中常用的布局父框打开后displayflex，默认是不换行，所以使用flexwrapwrapwrap包起来使用justifycontentspacearound使其子箱的主轴间距均匀分布使用aligncontentspacearound使其子。

响应式布局 采用自适应布局和流式布局的综合方式，为 不同屏幕分辨率范围 创建 流式布局 弹性布局 要点在于使用 ltttem和rem单位lttt 来定义元素宽度，与流式布局有极大的相似性，但也有不同之处，主要区别在于；然后说PC端的，由于各个CSS框架的推进，基本上都是以12列或12的倍数网格布局为主了，然后网格布局又分为流式网格和固定宽度网格如总宽度设为960px前者通常用百分比来实现，并且已经计算和减去了所谓的“；1059M，请及时下载，以免失效另外附送Div+CSS30网页布局案例精粹pdf。

如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex 设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况多行，在单行下是没有效果的flexflowrow wrapflex 属性定义子；有两种实现方式在讨论如何实现上面的方法之前，先搞懂单元格是如何被布局的用垂直的流式布局作为例子水平的很相似如果单元格具有固定的大小，只要使用 layout 对象即可 UICollectionViewFlowLayout；#流式布局流式布局是指所有元素都默认向左上角靠拢，通过调整元素相对位置来达到预期效果这种布局方式的优点是适应性强，可以在不同分辨率的设备上自适应调整缺点是元素位置取决于相邻元素的位置和尺寸，不够灵活；流式布局方式是移动web开发使用的比较常见的布局方式父盒子开启displayflex后，默认为不换行，所以使用flexwrapwrap使其换行 使用justifycontent spacearound 使其子盒子主轴间距平均分配 使用aligncontent space。

流式布局，就是百分比布局，也称非固定像素布局通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充流式布局方式是移动web开发使用的比较常见的布局方式父盒子开启displayflex后；静态布局 静态布局采用像素px作为页面设计的单位在不同的显示宽度下，页面元素大小都是固定的 流式布局 流式布局以百分比设定页面宽度，当显示区域变化时，页面布局会等比的发生改变 流式布局强调的是适应屏幕宽度的变化在实际；第四种grid布局 父盒子display grid gridtemplatecolumns300px auto 300px分割成3列，宽度分别为300px auto 300px gridtemplaterows100px占一行，行高100px。