基于css 的div 网页布局设计
2021-04-24楚孟慧吴姝瑶
楚孟慧 吴姝瑶
（山东科技大学 电气信息系，山东 济南250031）
1 div+css 布局的优势
1.1 与表格布局比较。css+div 布局在网站开发中已经被应用很多年了，占据了相当大的主导地位。div 是HTML 里的一种标签
将css 样式表打包成一个文件，使用时可重复调用、举一反三。使用css+div 布局可以使内容和表现形式分离，代码干净整洁、有较好的复用性和可读性。与css+div 布局相比因表格布局最初的目的是用于放置文字显示内容，用于网页布局必须要调整表格内部大小，与制表元素夹杂在一起容易导致大量冗余代码，影响代码的可读性并且难以维护。
1.2 属性的多样性。Div 元素可设置多种属性，其属性可通过css 层叠样式表统一设置，下面是几种较为常用的能够增强网页美观度属性设置。
1.2.1 background 设置背景颜色，例如设置背景颜色为红色或者绿色background：red/green ，其中属性值还可以用十六进制数表示；属性值若是为url（“图片路径”）则为设置该路径下的图片为此div 元素的背景。
1.2.2 opacity 设置背景颜色的透明度，例如opacity：0.7 效果是百分之70 是不透明的，数值越小透明度越高。
1.2.3 border-radius 设置div 元素的圆角化， 例如border-radius：10px 将10px 的宽度进行圆角化且数值越大圆角化的程度越高。
1.2.4 border 设置边框属性，此属性可同时设置边框的宽度、样式、颜色。例如：border: 1px solid #00008b 效果宽度为1px，样式为实线，颜色为#00008b。
2 div+css 布局的劣势
虽然大多数浏览器都支持css+div 技术，但还是有部分浏览器不支持此技术。而且div+css 技术对于新手开发者来说是比较困难的，因为相对于表格布局来说div 元素的定位更复杂，容易导致页面分布七零八落。
3 div+css 实现网页布局
3.1 常规流式布局
流式布局是在网页中常见的布局，流式布局是按照标签的编写顺序来依次垂直排列。如图1：
图1 流式布局
流式布局代码：
代码解析：常规流式布局中简单罗列
3.2 浮动布局
仅仅使用常规的流式布局只能实现垂直方向上的div 元素排列无法形成多种多样的网络布局结构，此时浮动布局就显得尤为重要。浮动布局可以形象的描述为每个div 元素块就像浮动在水面上，位置可以随着水流方向的改变而改变。浮动分为两个方向左浮动和右浮动分别对应属性和属性值为float：left /right。在同一行中的不同div 元素可以存在不同的浮动，浮动块不会相互重叠。在不需要浮动属性时可以清除浮动，浮动布局可以使各部分排列有序，从而有利于对整体空间规划。
当三个相同大小的div 元素都设置向左浮动的属性时则出现如图2 所示的情况：
图2 全部左浮动
当没有浮动属性时float：none 也是默认设置网页布局与图1 相同。
当底部div 的浮动属性由float：left 改为float：right 时底部div 模块会向右对齐。
当div 排列在同一行时当底部div 的浮动属性被清除即clear：left 则底部div 将换行显示，如图3 。
图3 底部清除浮动
当大小不一致的div 元素排列在同一行，不能完全显示的div 会自动换行，并在下一行的开头显示，如图4。
图4 底部换行显示
在css 中加入float：left 使得三个div 层全部左移形成水平排列的效果。css 样式表中的高度和宽度大小相同。
3.3 定位布局
3.3.1 静态定位。position：static 如果代码中不写position 属性相当于写上了position：static，元素在它原本的位置显示，即使增加top、left 等属性也不起作用。
3.3.2 相对定位与绝对定位。相对定位：podition：relative 是相对于原来位置进行上下左右的移动，且原来位置仍被占位。
绝对定位position：absolute 是相对于网页左上角0 点来说，配合top、left、right、bottom 来进行定位。若位于父层元素的下一层元素则是相对于父层元素来定位，前提是父层元素已经定位。当父层元素定位为绝对定位，子层元素相对于最近的父层元素发生改变。
当Grandfather 层定位，fatehr 层进行想对移动之后，son 层相对于已经定位的father 层进行移动，如图5 所示。
图5 绝对定位
解析：首先Grandfather 层div 设置position：absolute，此时Father 层的最近父层则为Grandfather 层，于是Father 层相对于Grandfather 层偏移。Father 层设置为position：absolute 之后Son层可以相对于Father 层进行偏移。
4 结论
综上所述，css+div 布局结构存在着优势同时又存在着劣势。但div+css 布局能够成为主流主要是由于css 与div 将样式与布局分离，避免改变样式时需要大量的修改代码。所以对于新手设计师来说需要将div+css 结构掌握之后再进行网页设计，尽量避免定位不准确的问题，掌握三种常用的布局方式对设计网页有极大帮助。
