为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。
这种布局具有很强的稳定性与可控性，也没有兼容性问题，但不能根据用户的屏幕尺寸做出不同的表现。即如果用户的屏幕分辨率小于这个宽度就会出现滚动条，如果大于这个宽度则会留下空白。
流式布局（LiquidLayout）
为网页设置一个相对的宽度，页面元素的大小按照屏幕分辨率进行适配调整，但整体布局不变，通常以百分比做为长度单位（通常搭配min-*、max-*属性控制尺寸流动范围以免过大或者过小导致元素无法正常显示），高度大都是用px来固定住。流式布局的代表作栅格系统（网格系统）。
例如设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%,max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。
缺点：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调
栅格化布局
将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位，通常利用百分比做为长度单位来划分成均等的长度。
比如像bootstrap，foundation这些框架采用的就是栅格系统，只要给页面元素添加其栅格系统指定的类名，就能达到想要的响应式布局效果。
bootstrap的栅格系统是通过一系列的行和列的组合来创建页面布局，它的栅格系统最大分为12份:
不过版本bootstrap3与bootstrap4实现栅格系统方式不一样,bootstrap3为了兼容IE，采用的是浮动方式来实现栅格系统：
即每一个栅格都是用左浮动和百分比来进行排版，当窗口宽度改变，对应改变container容器的宽度，对应栅格宽度自然也跟着改变：
bootstrap4放弃了对IE的支持，采用的是最新的伸缩布局方式：
自适应布局（AdaptiveLayout）
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即为不同类别的设备创建不同的静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换调用相应的布局（页面元素位置发生改变而大小不变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
在这种布局方式下，当视口大小低于设置的最小视口时，界面会出现显示不全，溢出，并出现滚动条。而且当需求改变时，可能会改动多套代码。
使用自适应布局时，首先在网页代码的头部，加入一样viewport标签：
响应式布局
响应式布局的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、ipad等）都能显示出令人满意的效果。通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的展示效果，一般情况下是检测设备屏幕的宽度来实现。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
应用响应式布局，首先要使用视图的meta标签来进行重置：
然后使用@media媒体查询给不同尺寸和介质的设备切换不同的样式。同自适应布局一样，在书写CSS样式时，元素宽度不能使用绝对宽度，而要使用相对大小。
自适应布局和响应式布局对比：
不同点：
1.自适应需要开发多套界面；响应式只需开发一套界面。
2.自适应对页面的屏幕适配实在一定的范围，比如：pc端>1024px;平板768~1024px;手机端<768px;响应式是一套页面同时兼容在pc端、平板和手机端的各个不同视口，而不是为每个终端做一个特定的版本，所以需要考虑的状态非常多。
相同点：
都是通过检测视口分辨率，使页面适应不同分辨率的视口。
弹性布局（rem/em布局）
弹性布局跟流布局很像，网页宽度不固定，使用em或rem单位进行相对布局，避免了使用像素px布局在高分辨率下几乎无法辨识的缺点，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。但弹性布局也有局限性，如果不对这种布局设置一个最小宽度，当用户缩小窗口到足够小时会造成布局严重错位。
关于em/rem/px/%...的使用戳这里
伸缩布局（Flexbox）
使用css3Flex系列属性进行相对布局，用来为盒模型提供最大的灵活性。对于富媒体和复杂排版的支持非常大，但是存在兼容性问题。任何一个容器都可以指定为flex布局，行内元素也可以使用。
注意：设为flex布局后，子元素的float、clear、vertical-align属性将失效。
注：以上几种布局方式并不是独立存在的，实际开发过程中往往是相互结合使用的，根据项目的需求，取各自之所长。