div的布局有哪些类型

更新时间：2024-12-23 01:24:34

div有五种布局类型：弹性布局、固定布局、流体布局、混合布局、绝对定位布局。

1、弹性布局：总体宽度及其中所有栏的值都以em单位编写，这应使布局能够使用浏览器的指定基本字体大小缩放。对于视力不好的用户，这可能更有吸引力、更易于访问，因为栏宽度将变得更宽，能以任何大小显示更舒适、更可读的行长度。

2、固定布局：总体宽度及其中所有栏的值都以像素单位编写，布局位于用户浏览器的中心。

3、流体布局：总体宽度及其中所有栏的值都以百分比编写，百分比通过用户浏览器窗口的大小计算。

4、混合布局：混合布局组合两种其他类型的布局-弹性和流体，页面的总宽度为100%，但侧栏值设置为em单位。

5、绝对定位布局：所有前述布局的外栏使用浮动内容。而绝对定位布局完全如其名所示，有绝对定位的外栏。当使用这些布局时，侧栏会“提出文档流程”，因而可能有一些不合适的结果。