新手入门宝典（新手必看一学就会）

网页设计中的布局一般分为前端视角和设计视角。其中，前端视角主要是指实现页面的各种CSS布局方式，分别为：静态布局、流式布局、响应式布局、弹性布局和Flex布局。除了静态布局，其他都能实现在不同分辨率下页面的自适应，来给用户最佳的视觉呈现。今天，就给大家讲讲前端网页设计中的静态布局和流式布局。

静态布局

概念

静态布局是最简单的一种布局方式，网页上的所有元素的尺寸一律使用px作为单位,在正常文档流中该是什么位置就是什么位置。

特点

不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示，如果设置了最小宽度，当小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，常用于PC端。

设计方法

居中布局，所有样式使用绝对宽度/高度(px)，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分。

优缺点

优点：这种布局最简单，也没有兼容性问题。

缺点：不能根据用户的屏幕尺寸做出不同的表现。

实践案例

例如我们常用绝对定位布局，盒子固定宽度居中，里面三块固定宽高，通过定位方式一行排列，适用于PC端。

显示效果：

当页面窗口缩小的时候，超出部分用滚动条显示查询。

移动端

由于静态布局不适用于手机端,所以一般都会另设计一个布局,并使用另一个域名。例如百度。

可以发现：

PC端限制了最小的宽度, 低于了则以最小宽度出现滚动条；

移动端限制了最大的宽度, 超过了则以最大宽度居中显示。

流式布局

概念

流式布局也叫百分比布局，页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。

特点

屏幕分辨率变化时，页面里元素的大小会变化而但布局不变，如果内容过长,可以实现自动换行。

设计方法

使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。

优缺点

优点：可用来应对不同尺寸的PC屏幕，在移动端开发也是常用布局方式；

缺点：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示，因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

实践案例

例如我们常用左侧固定，右侧自适应；左右固定宽度，中间自适应；圣杯布局，双飞翼布局，品字布局。下面是品字布局代码。

显示效果：

当页面窗口缩小的时候，页面布局也不会发生变化。

就算是在移动端，布局也不会发生变化。

以上就是本文的全部内容啦~不知道有没有对你起到一些帮助呢？如果你想了解更多关于前端方面的知识和技巧，请持续关注云和数据的最新动态哦~还有更多精彩敬请期待！

,