网页的本质是html,究其本质，到底什么是网页布局

布局(layout)即对事物的全面规划和安排，页面布局是对页面的文字、图像或表格进行格式化版式排列。

网页布局对改善网站的外观非常重要，又称版式布局，大多数网站会把内容安排到多个列中，就像杂志或报纸那样，

网页版面的设计延续了传统纸媒的特点，但又比传统的纸媒更灵活，传统的纸媒由于纸张大小的限制，只能在有限的空间内排列内容，而网页版面的布局，可以根据内容自适应宽度和高度。

在 HTML 中，常使用 div 元素来创建多列，使用 CSS 对元素进行浮动、定位等，从而将网页设计稿中的布局样式呈现在网页上。

网页布局是网页制作的基础，通常使用的方式有三中：流式布局，即元素按照标准文档流进行排列；浮动布局和绝对定位布局。而在各大网站中，常见的布局结构分为：一列布局，两列布局，三列布局和混合布局，其中使用最多的是混合布局，即按照网站的实际需求使用多列进行布局。

过去，大多数的网站仍采用一套通用的排版模式，页头、页脚、侧边栏和内容区域，构成了这种直截了当的布局。

随着 HTML5 和 CSS3 新技术的出现，以及移动设备的飞速发展，互联网发生了翻天覆地的变化，对于如今来说，布局已不必再拘泥于固定格式。

近些年网页排版设计的趋势，都是非常规布局，他们并不严格遵循某种准则或既定体系。视觉交互方面的，比如全屏布局，瀑布流，无缝拼图布局等，这些都不局限于传统的布局方式。

而对于传统类的，信息类的网站大多都采用单列，两列或三列布局，还有混合布局结构。页面的布局结构会直接影响页面的用户体验，

比如很受欢迎的卡片式网页设计，不仅外观漂亮，而且具有很强的实用性，信息和内容高度整合，却又如此简单优雅。

下面就上面已经提及到的网页布局进行一些简单的描述和建议，让读者更清晰易懂，懂得其含义。以便能更好的运用在进行网页布局时。

一，CSS中，存在三种定位机制：标准文档流，浮动，绝对定位。

标准文档流：从上到下，从左到右输出文档内容，由块级元素和行级元素组成。

浮动：float属性left(左浮动) right(右浮动) none(不浮动) ， 元素会左移或右移，直至碰到容器为止。

绝对定位： position属性 拥有三种定位方式 1.静态定位(static) 2.相对定位(relative) 3.绝对定位

二，网页布局的结构

网页实质是块与块之间的位置，块挨着块，块嵌套块，块叠着块。

三种关系：相邻，嵌套，重叠。

1.一列布局：

一般都是固定的宽高，设置margin : 0 auto来水平居中，用于界面显著标题的展示等；

2.两列布局：

说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。

设置左左浮动，或设置左右浮动(这是需要确定父级元素的宽度)

3.三列布局：两侧定宽中间自适应

首先设置父级元素的宽度，可以左左右设置浮动。然后中间设置margin调整间距。 也可以都设置成左浮动，设置margin，调整间距。

同样注意清除浮动的影响！或着为父级元素设置relative属性，再为子元素设置absolute属性，再分别定位，调间距。

4.混合布局：

在一列布局的基础上，保留top和foot部分，将中间的main部分改造成两列或三列布局，小的模块可以再逐级同理划分。

5.扩展(如等分布局等)

三，网页的骨架已经设计好了，接下来就是对网页整体的一个把握，让网页更能适应浏览器，给读者带来更好的体验效果。下面几种是常见的布局方式：

1、静态布局(static layout)

即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。

布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。

常规的pc的网站都是静态(定宽度)布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。

缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。

固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。

2、流式布局(Liquid Layout)

流式布局(Liquid)的特点 ：是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。

网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用)，例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真)。

布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。

但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，

但是高度、文字大小还是和原来一样(即，这些东西无法变得“流式”)，显示非常不协调

3、自适应布局(Adaptive Layout)

自适应布局的特点：是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。

改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变)，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。

布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

4、响应式布局(Responsive Layout)

响应式设计的目标是确保一个页面在所有终端上(各种尺寸的PC、手机、手表、冰箱的Web浏览器等等)都能显示出令人满意的效果

对CSS编者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。

同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。

可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

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

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

缺点：(1)媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。

(2)要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。

5、弹性布局(rem/em布局)

使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。

布局的特点是：包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位(同「流式布局」或「静态/固定布局」)。

早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。

其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于(根据屏幕尺寸)调整页面的各元素的尺寸、文字大小时比较好用。

其实，使用vw、vh等后起之秀的单位，可以实现完美的流式布局(高度和文字大小都可以变得“流式”)，弹性布局就不再必要了。

结论

1.如果只做pc端，那么静态布局(定宽度)是最好的选择；

2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局(rem+js)是最好的选择，

3.如果pc，移动要兼容，而且要求很高，那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。

不知道说了这么多关于网页布局的知识，大家有没有很好的理解呢，可以自己去设计一个网站尝试一下这些方法哦！

举报/反馈