Web前端布局

布局的概念

什么是布局

布局是前端人员的核心基础技能。
目的是对所做的页面模块及内容进行科学合理的组织和呈现。
因此布局的好坏就直接影响到之后工作的进展与效率。

布局的作用

1. 使页面美观、漂亮、让用户赏心悦目，留住用户。
2. 提高页面开发和维护的效率。

布局的方式

一、浮动布局

使用CSS中 float 属性使元素向左或向右移动，使用它块级元素就会同行显示。
浮动之后的元素会围绕它，浮动之前的元素不受影响。
元素浮动后，周围元素也会重新排列。可使用 clear 清除浮动，来避免此影响。

二、定位布局

使用 position 属性定义定位类型，并指定元素位置来布局。

static 定位

静态定位的元素遵循正常文档流对象，为HTML的默认值。

fixed 定位

固定定位的元素相对于浏览器窗口是固定位置。
窗口滚动也不会移动。
完全脱离文档流，因此不占据空间，能与其他元素相重叠。

relative 定位

相对定位的元素相对于自身正常位置。
不脱离文档流，移动后原本占据的空间不会改变。
也经常用来作为绝对定位的容器。

absolute 定位

绝对定位的元素相对于已定位的父元素，若无已定位的父元素，则相对于HTML。
脱离文档流，不占据空间，与其他元素相重叠。

sticky 定位

粘性定位是基于页面滚动位置，在相对定位和固定定位之间切换显示。

堆叠顺序

使用 z-index 属性控制堆叠顺序，值越大层级越高。
有定位的元素比没有定位的元素层级高。
在都有定位的情况下，层级取决于书写顺序。

三、静态布局

静态布局是在网页上对所有元素的尺寸一律使用 px 为单位。
静态布局是传统的网站布局方式，当屏幕缩小时，会出现横向和竖向的滚动条，来以隐藏溢出部分。

优点：
代码简单，编写容易，且无兼容性问题。
缺点：
无法根据不同的屏幕尺寸做出相应的表现。

四、流式布局

流式布局使用 % 定义元素的宽度，使用 px 定义元素高度。
当屏幕分辨率发生变化时，页面中元素大小改变，布局位置不变。
往往配合 max-width 和 min-width 等属性控制元素尺寸流动范围，以免过大或过小影响阅读。

优点：
在不同的屏幕尺寸下显示相同的样式（前端开发早期屏幕尺寸差异不大）。是移动端常用布局方式。
缺点：
如果屏幕尺寸与最初设计的比例之间跨度过大，元素会被拉伸或挤压，导致内容显示不协调。

五、弹性布局

弹性布局可以简单、完整、相应式的实现各种页面布局。并且兼容所有主流浏览器。
对容器（父元素）与项目（子元素）添加属性进行布局。
使用 em (相对父元素的尺寸)和 rem (相对HTML元素的尺寸)为单位设置元素，且支持字体大小调整。

优点：
灵活性高，可完美适应宽高比一样的屏幕尺寸。
缺点：
这种只是宽度自适应，高度不是自适应，因此不能满足对高度或元素间距有要求的设计。

六、自适应布局

自适应布局是创建多个静态布局，每个静态布局对应一个屏幕尺寸范围。
使用 @media 媒体查询在不同尺寸的设备上切换相对应的样式。

优点：
通过开发多套界面来满足不同屏幕尺寸所对应的样式需求。
缺点：
自适应屏幕适配是在一定范围内，若屏幕太小，页面内容会拥挤。

七、响应式布局

相应式布局的每个屏幕下会有一个布局样式，即元素位置和大小都会变。
页面兼容所有屏幕尺寸，而不是为每一个屏幕尺寸做特定的样式。
通常使用 @media 媒体查询和网格系统配合进行布局。

优点：
满足用户在不同设备上浏览访问的需求。
同时方便网站内容的管理与更新、针对搜索引擎友好等特点。
缺点：
设计难，实现难，成本大。

布局应用

1. 若只做 pc 端，静态布局是最好的选择，通过定宽高即可简单快捷的完成。
2. 若只做移动端，且元素高度与间距要求不高，弹性布局是最好的选择，使用 css 以及调节字体大小即可完成。
3. 若pc端与移动端要兼容，且要求很高，响应式布局是最好的选择，根据不同宽高做不同布局。