前端布局笔记

前端入门一年多，项目全靠div解决，布局这块了解太少了，归纳下前端布局。

归纳前端五大布局：静态布局、自适应布局、流式布局、响应式布局、弹性布局，及静态布局中两栏、三栏布局等。

一、静态布局

静态布局就是传统web，不管设备尺寸变化，网页布局不变。

二、自适应布局

自适应布局就是元素位置变化，大小尺寸不变。

三、流式布局

流式布局与自适应布局相反，元素大小变化，位置不变。

四、响应式布局

响应式布局会随着分辨率变化，改变元素大小位置。

五、弹性布局

弹性布局又称 flex布局，常用于多行多列元素，根据代码自动缩放。

六、附

1、两栏布局

两栏布局是左边固定，右边自适应，常用左侧菜单栏，右侧内容。

菜单

内容

 

2、三栏布局

圣杯布局和双飞翼布局都是左右两栏固定宽度，中间部分自适应的三栏布局。
圣杯布局和双飞翼布局的区别在于，圣杯布局左右在中间栏两侧，双飞翼布局左右两侧在中间栏上面。

 

写的很详细的干货：https://juejin.im/post/5aa252ac518825558001d5de

主要写的是 —— 各种页面常见布局+知名网站实例分析+相关阅读推荐’