前端几种常见的布局方式

Posted 2023-02-24

参考技术A 1.静态布局（固定宽高）

2.弹性布局（flex）————常用

3.圣杯布局

flex：flex-group、flex-shrink、flex-basis

flex：auto/none/负数/一个长度或百分比/两个非负数/一个非负数和一个长度或百分比等

A，flex-group：当父元素有剩余空间时，子元素占据剩余空间的量

B，flex-shrink：当父元素的空间不足以展示所有的子元素，父元素没设置flex-wrap，子元素需要进行收缩的量

C，flex-basis：表示该子元素的初始宽度

4.自适应布局（为不同的屏幕分辨率定义的布局 @media媒体查询技术）

5.流式布局：（宽高用百分比，按屏幕分辨率调整，布局不发生变化）

6.响应式布局（使用meta标签，宽高随窗口调整自动适配，适应布局和流式布局的综合方式）

7.栅格布局

1）.栅格(网格划分)：在一个特定区域内划分出有规律的格子，依靠这些格子进行有规律的版面布局。

使用栅格布局：bootstrap（12列），element（24栏），antDesign

2）.栅格布局

container：栅格系统容器；rows：行；cols：列；gutters：各列间的空隙

3）.栅格布局实现响应式布局

8.table布局（使用表格进行页面排版和样式设置）

1）.用法

      display:table

      display:table-cell，相当于td元素

      display:table-row，相当于tr元素

      table-layout:fixed | auto(默认)：table-layout 属性用于显示表格单元格、行、列；auto, 自动表格布局，列的宽度由单元格中最大内容的宽度决        定；fixed ,固定表格布局。