前端中的布局方式有哪些？

在web前端开发中，存在有很多的布局模式，这些布局模式各有各的优势，今天咱们就在说说，前端中的布局方式有哪些

一、Table布局

首先是table布局，table布局是一种非常古老的布局模式，很早之前都是使用table布局的，并且在之前在Dreamweaver甚至可以直接生成table布局的页面，可想而知，在很早以前，table表格也是非常受欢迎的一种布局模式。那为什么现在不再使用了呢？

table表格布局结构麻烦，创建一行就需要添加 table - tr - td 三个标签，这样写起来是很麻烦的

table样式不好调整

现在主流的设计页面以不规则的网页位置，而table表格在布局上有局限，只能在方方正正的页面中才能使用

因此现在市面上，基本上没有用table表格布局的网页了，目前现在还存在的，又一个叫蓝色理想的网站，使用table表格布局的，大家可以参考一下

二、Div+CSS

div+css是现在都比较常用的布局模式，把div作为一个盒模型，用css来做样式上的调整。

这种布局模式能够满足大多数网页的设计，也是现在前端开发工程师经常使用的布局模式；

但是如果想要让页面能够随着页面的变化而变化就不太能实现了

三、响应式布局

响应式布局，说白了就是一个页面，能够适应多个终端（PC，移动，平板，手机的横竖屏都能正常显示）

响应式布局可以给不同终端的用户提供更好的用户体验，而且现在大屏幕的移动设备越来越多，大家对响应式页面的体验也越来越好。

那响应式布局到底怎么做呢？其实很简单，响应式其实就是css3中新增加的一个知识点，通过Media Query（媒介查询）来设置让页面在不同的页面都能做到正常适配

这就是一个比较简单的响应式页面，在屏幕600到799之间的时候，背景颜色显示为绿色，内容宽度调整为500px

四、弹性盒子

弹性盒子也是css3中新增加的一种布局模式。

弹性盒子也是一种为了适配不同屏幕的一种布局模式，但是弹性盒子主要是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

所以一般一个模块中水平方向上平分显示的时候会经常使用到弹性盒子

五、圣杯布局

圣杯布局也叫双飞翼布局，就是两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染

当屏幕水平方向上缩放的时候，左右两侧的内容固定不变，中间内容的宽度会随着屏幕的变化而变化

在网页布局中还有其他的布局模式，当然这些布局模式可以叠加选择，也可以单独使用。掌握更多的布局模式，能够让我们在做页面的时候有更多的选择，这样就能更快的作出，适合在不同屏幕都可以适配的页面了