常见的布局场景类型

历代网页布局

1：表格布局

表格布局.png

2：DIV+CSS布局

div_css.png

3：flex布局

flex.png

4：grid布局

grid1.png grid2.png

一：圣杯布局

在页面上的显示效果就是左右两边是个固定的宽度，中间的容器自适应；即根据页面大小的变化而变化

201328573248955.png

二：栅格布局

把一个网页分为很多格子方便设计和切图，这就是栅格系统
好处：

提高生产力，通过在网格的划分，元素更容易的堆放而且在跨浏览器上面具有一致性，使我们可以专心的注意布局而不是兼容上。

具有灵活性，无论什么样的布局，都可以拆分为一个网格的大小。

支持响应式的设计、栅格系统本身能很好的额和响应设计结合在一起，或者说，我们的栅格布局系统使基于响应式设计的。

栅格布局实例.png 微信截图_20190118210830.png

三：浮动两栏布局和定位使用

TIM截图20190121211151.png

四：响应式布局

所谓的响应式布局，可以粗略地理解为判断屏幕⼤⼩，采⽤最合适的展示效果。
关于rem的知识：
1rem等于多少px呢？
1rem等于html根元素设定的font-size的px值，假如我们在css里面设定下面的css。
html{font-size:14px}
那么后面的CSS里面的rem值则是以这个14来换算，例如设定一个div宽度为3rem,高度为2.5rem.则它换算成px为width:42px.height:35px，同理，假如一个设计稿为宽度42px,高度为35px，则换成成rem，则是42/14=3rem，35/14=2.5rem。
如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

TIM截图20190122142245.png