html表格布局方式有那几种,前端几种常见的布局方式

1.静态布局(固定宽高)

2.弹性布局(flex)————常用

3.圣杯布局

flex&＃xff1a;flex-group、flex-shrink、flex-basis

flex&＃xff1a;auto/none/负数/一个长度或百分比/两个非负数/一个非负数和一个长度或百分比等

A&＃xff0c;flex-group&＃xff1a;当父元素有剩余空间时&＃xff0c;子元素占据剩余空间的量

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

C&＃xff0c;flex-basis&＃xff1a;表示该子元素的初始宽度

4.自适应布局(为不同的屏幕分辨率定义的布局 &＃64;media媒体查询技术)

5.流式布局&＃xff1a;(宽高用百分比&＃xff0c;按屏幕分辨率调整&＃xff0c;布局不发生变化)

6.响应式布局(使用meta标签&＃xff0c;宽高随窗口调整自动适配&＃xff0c;适应布局和流式布局的综合方式)

7.栅格布局

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

使用栅格布局&＃xff1a;bootstrap(12列)&＃xff0c;element(24栏)&＃xff0c;antDesign

2).栅格布局

container&＃xff1a;栅格系统容器&＃xff1b;rows&＃xff1a;行&＃xff1b;cols&＃xff1a;列&＃xff1b;gutters&＃xff1a;各列间的空隙

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

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

1).用法

display:table

display:table-cell&＃xff0c;相当于td元素

display:table-row&＃xff0c;相当于tr元素

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