Web前端布局

Web前端布局

布局的概念

什么是布局？

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

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

布局的方式

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

二、定位布局
使用 position 属性定义定位类型，并指定元素位置来布局。
static 定位
静态定位的元素遵循正常文档流对象，为HTML的默认值。
fixed 定位
固定定位的元素相对于浏览器窗口是固定位置。
窗口滚动也不会移动。
完全脱离文档流，因此不占据空间，能与其他元素相重叠。
relative 定位
相对定位的元素相对于自身正常位置。
不脱离文档流，移动后原本占据的空间不会改变。
也经常用来作为绝对定位的容器。
absolute 定位
绝对定位的元素相对于已定位的父元素，若无已定位的父元素，则相对于HTML。
脱离文档流，不占据空间，与其他元素相重叠。
sticky 定位
粘性定位是基于页面滚动位置，在相对定位和固定定位之间切换显示。
堆叠顺序
使用 z-index 属性控制堆叠顺序，值越大层级越高。
有定位的元素比没有定位的元素层级高。
在都有定位的情况下，层级取决于书写顺序。
三、静态布局
静态布局是在网页上对所有元素的尺寸一律使用 px 为单位。
静态布局是传统的网站布局方式，当屏幕缩小时，会出现横向和竖向的滚动条，来以隐藏溢出部分。
优点：
代码简单，编写容易，且无兼容性问题。
缺点：

无法根据不同的屏幕尺寸做出相应的表现。

四、流式布局
流式布局使用 % 定义元素的宽度，使用 px 定义元素高度。
当屏幕分辨率发生变化时，页面中元素大小改变，布局位置不变。
往往配合 max-width和 min-width 等属性控制元素尺寸流动范围，以免过大或过小影响阅读。
优点：
在不同的屏幕尺寸下显示相同的样式（前端开发早期屏幕尺寸差异不大）。是移动端常用布局方式。
缺点：
如果屏幕尺寸与最初设计的比例之间跨度过大，元素会被拉伸或挤压，导致内容显示不协调。