思维导图

固定布局

介绍

固定布局也叫静态布局

特征

给页面元素设置固定的宽度，高度，单位一般采用px等绝对长度单位一般设置了min-width，当窗口缩小时，会出现滚动条针对不同分辨率的设备，分别写入不同的样式文件。

优点

List item固定宽度的布局更易于使用以及制定设计页面。浏览器支持度高

缺点

用户体验不好，固定宽度的布局可能给屏幕分辨率大的用户造成过多空白空间。较小的屏幕分辨率可能需要水平滚动条，这取决于固定布局的宽度。在可用性方面，固定宽度布局总体效果不是很好。不能根据用户的屏幕尺寸做出不同的表现。

应用

当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。

示例代码

浮动布局

介绍

也叫float布局

浮动的设计初衷是为了设计文字环绕效果

特征

脱离文档流

优点

浮动可以使元素block块状化（也就是行内元素浮动后可以设置宽高）；即display:inline-block;可以使块元素同行排列

缺点

导致父元素高度塌陷元素脱离文档流，布局困难

应用

现在pc端网页使用此布局较为频繁，和固定布局结合使用

示例代码

中间内容区使用浮动布局，实现三个div块同行

表格布局

介绍

表格更多的是用来展示数据

特征

当内容溢出时会自动撑开父元素

优点

兼容性很好结构位置更简单容易上手

缺点

无法设置栏边距；当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的标签结构多，复杂不利于搜索引擎抓取信息，直接影响到网站的排名Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌

应用

很少有网站直接使用这种布局方式，但有些网站后台分页会使用它来展示数据

示例代码

可以看到代码结构较为复杂

合并表格行或列

菜谱
素菜	青草茄子	花椒扁豆
	小炒韭菜	白豆腐
	荤菜	清蒸龙	鱼香肉丝
小炒肉		水煮肉片

列里边嵌入子表

购物车

1	2	3	4
名称	1 2	1 2 3	小计
名称	2016-11-22	小计	小计
苹果	3公斤	5元/公斤	15元
香蕉	2公斤	6元/公斤	12元
总价			27元

流式布局

介绍

也叫百分比布局

特征

高度定死,宽度自适应使用相对单位

优点

可以适应不同尺寸的屏幕

缺点

对于大屏幕来说,用户体验并不是特别好,有些布局元素会显得很长

应用

移动端一般采用流式布局对于大的轮播图等,宽度100%自适应

示例代码

可以试着改变浏览器宽度，看看页面的变化

自适应布局

介绍

自适应的概念网上有很多，这里单单指媒体查询

它本质是多个静态布局

特征

分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化

优点

适配大部分设备

缺点

为每个设备写一个媒体查询

应用

@media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局

示例代码

响应式布局

介绍

通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用

特征

每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变

优点

适应pc和移动端，如果足够耐心，效果完美

缺点

媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本

应用

bootstrap响应式布局的实现可以通过媒体查询+px,媒体查询+百分比，媒体查询+rem+js这几种方式来实现

示例代码

这是一个bootstrap实例

弹性布局

介绍

也叫flex布局

当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

特征

弹性盒子是CSS3的一种新布局模式弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。

优点

容易上手，根据flex规则很容易达到某个布局效果

缺点

浏览器兼容性比较差

应用

用于适应各个尺寸的设备

示例代码

• test1
• test2
• test3

常见布局模式

单列布局

头部、主体、底部等宽头部、底部自适应；主体固定宽度

双列布局

左侧边栏固定，右边主体自适应右侧边栏固定，左边主体自适应

三列布局

左右两列固定宽度；中间主体区自适应左右两列绝对定位；中间主体区自适应

补充： rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。

注： 每个布局各有优缺点，在现实项目中应该配合使用