Skip to content

常用的布局实现

Published: at 08:00 AM

常用的布局实现

流体布局(是不是也称为流式布局)

左右模块各自左右浮动,中间模块的margin值使中间模块宽度自适应。缺点是主要内容无法预先加载,当页面内容过多时影响用户体验。

BFC三栏布局

缺点是主要内容不能最先加载,当页面内容过多时影响用户体验。为了解决这个问题才用到双飞翼布局。

双飞翼布局

利用浮动元素margin负值的应用。主体内容可以先加载,HTML代码结构稍微复杂点。

圣杯布局

跟双飞翼布局很像,细节上有区别,HTML的结构相对简单,但是样式定义就稍微复杂,也是优先加载主体内容。

Flex布局

需要考虑兼容性

Table布局

Table布局的缺点是无法设置栏间距。不能设置margin值,有padding值。

绝对定位布局

简单实用,主要内容可以先加载。

Bootstrap布局

上面的例子是简化了bootstrap4的 album这个demo的部分代码,其实要是熟悉bootstrap的语法,所有的样式都通过bootstrap来做,也会非常统一。

参考

  1. 详解CSS七种三栏布局技巧