网页布局是网页设计开发工作的重要组成部分，通过合理的网页布局能够实现网页页功能的精准定位，增强网页展示效果，使用户能够在较短的时间内找到目标元素。此外，合理的功能布局、图像搭配可以增强网页视觉表现力，给用户带来强烈的视觉感受，DIV+CSS布局技术可以让用户像编辑Word文档一样调整网页中的元素，同时还可以精准定位网页中的位置，不但降低了网页维护的难度，而且还提高了网页在服务器中的下载速率及其在网络中的传输速率。现阶段，在网页设计中，DIV+CSS布局技术已经取代了传统的图层、表格等布局形式，并且能使设计人员获得优良的设计效果。

1 DIV+CSS布局方法

1.1DIV标签控制方法

DIV标签是网页设计中最常采用的方式，无属性的特点使其需要借助CSS代码进行网页布局控制，这样也可以让网页设计更加标准。

例如在CSS代码控制DIV中，可以在ID选择符中加入css代码，让DIV拥有背景宽度

		第一个div标签第二个div标签第三个div标签第四个div标签

 1.2 元素的样式设置

DIV 在网页布局设计中需要借助 css 代码来实现

		固定DIV的宽度和高度自适应DIV的宽度和高度

常见的网页布局技术分析

上 中 下布局

	网页头部
正文
正文
正文
底端

 二列固定宽度

DIV可以多层进行嵌套使用，嵌套的目的是实现更为复杂的页面排版

下列代码中的center部分为左右结构的布局

实现中部左右固定宽度布局，实现代码如下：

	头部左右

 二列宽度自适应

自适应效果主要通过宽度的百分比来实现

	左右

 二列宽度自适应居中

设置居中只需要一个margin:auto即可，在二列分栏中，需要控制使用DIV的嵌套设计来完成。可以使用一个居中的DIV来作为容器，将二列分栏的DIV放置在容器中

实现设置两列宽度自适应宽度，且整体居中效果，实现代码如下：

	头部左右

 中间三列浮动布局

实现设置三列浮动布局效果，实现代码如下

	头部左中右

UL+CSS布局

在上述案例中导航使用UL+CSS在头部使用

	
首页
CSDN
关于我们
联系我们
论坛
左中右

body{ background-color: aliceblue;}
#nav{width: 900px;margin: auto;}
#header{height: 30px;background-color: aqua;}
#center{clear: both;}
#left{ width: 200px;height: 200px;float: left;background-color: cornflowerblue}
#mid{width: 400px;height: 200px;float: left;background-color:hotpink;}
#right{ width: 300px;height: 200px;float: left;background-color: darksalmon}
#header li{ float: left;list-style-type: none;}
#header li a{display: block;padding: 6px 20px; color: #ffaa00; text-decoration: none;}
#header ul{ padding: 0px; margin: 0px;}
#center{clear: both;}

 clear清除浮动，表示是否允许在某个元素周围有浮动元素。当前面元素有浮动时，会影响后面的元素也产生浮动，也可以使用clear来清除该元素的浮动。

绝对定位与相对定位

绝对定位

      采用position:absolute;对象便开始进行绝对定位，绝对定位主要通过设置对象的top、right、bottom和left四个方向的边距来实现。一但设置了绝对定位，它就完全脱离了文档流与浮动模型，独立于其他对象，并且普通流中其他元素的布局就像绝对定位的元素不存在一样

   由于绝对定位的位置由自身的边距决定，因此会出现一个问题，元素的重叠，这种情况下，CSS允许我们通过设置对象的z-index属性，以设置其重叠的先后顺序，也就是z轴的顺序。

#a,#b,#c,#d{ width: 200px; height: 200px; border: 2px solid #aaaaff; background-color: #ffaa7f;}
#a{ float: left;}
#c{ float: left;}
#b{ position: absolute;top:80px;left: 100px;z-index: 1;}
#d{ position: absolute;top: 70px;left: 160px;z-index: 0;}

 相对定位

实际上相对定位就是浮动定位与绝对定位的拓展方式。相对定位使得被设置保持元素与其原始位置相对，并不破坏其原始位置的信息

例如，我们将上述b元素设置为相对定位时，他将相对于自身的原始位置进行定位，而其原始的占位信息依然存在，所以c和d继续浮动在b的右侧。

#a,#b,#c,#d{ width: 100px; height: 100px; border: 2px solid #aaaaff;background-color: #ffaa7f;float: left;}#b{ position: relative;top:80px;left: 100px;z-index: 1;}

 如果b和c发生了嵌套，那么b和c都同时发生相对定位

    abcd

盒子模型

     在CSS3中，一个独立的盒子 由content（内容）、padding（内边距）、border（边框）和margin（外边距）组成 

1.外边距（Margin）

一幅画与另一幅画之间的距离，即一个盒子与另一个盒子之间的距离就是外边距。

2.边框（Border）

网页中，用于分离和隔开不同元素的线（有粗细之分）就是边框。

3.内边距（Padding）

元素和边框之间的距离就是内边距。 元素距离边框的远近可以被控制。

4. 内容（Content）

盒子里装的东西就是内容， 它是网页中最主要的部分。 网页中的主要元素， 如文字、图像、动画、音视 频、表单等，都需要不断输出。

浮动式布局

浮动式网页布局是网页制作中常用的方法。浮动就是对 网页元素使用float属性,属性值为left或right，浮动后的元素则 脱离文档流，呈现出漂浮状态，直到遇到父元素的包含框或是 其他浮动元素拦截为止，可以实现良好的布局效果，从而使网 页的布局和结构更加丰富、自由、合理。浮动元素会影响标准 流中的网页元素，掌握浮动元素盒子模型的计算方法，根据不 同的浮动方案灵活设计HTML结构，在CSS中采用浮动法的块 元素将重新设置宽度，否则将按照实际大小呈现在网页上

设置了网页元素浮动之后， 由于浮动元素不再占用原文档的位置， 所以它会对相邻的固定元素产生影响。 为了避免浮动对其他元素产生影响，我们要设置命令来清除浮动。

清除浮动的方式通常有三种：

（1）使用 clear 来清除浮动 选择器｛clear：left＼right＼both；｝可以实现：不允许左侧有浮动 ＼ 不允许右侧有浮动 ＼ 同时清除左右两侧浮动。

（2）使用 overflow 属性清除浮动 对某元素应用 overflow：hidden；样式来设置，也可以消除浮动对该元素的影响

（3）使用 after 伪元素清除浮动 该方法只适用于 IE8．0 及以上版本的浏览器和其他非 IE 浏览器。

在没有为网页元素添加CSS定位或浮动等属性的情 况下，这些元素会自然地按照从上到下的顺序依次显示。标准流是默认的布局模式，适用于单列布局的子页面。在HTML代码基础上，CSS代码需要给出每个div盒子里面 id 选择器的 width、height 和 background-color。通常情况下，页 面的整体布局大都采用标准流方式。

单列布局

页头部分
正文部分
页尾部分

图像 小部件

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！