css中div的布局

在静态网页的编写中基本上都对<div>布局的应用。

概念问题说着容易，在实际操作的情况中网页比较复杂，考虑的问题应该比较全面。可以先画一个框架图，对各个板块的长宽践行计算再写起来会更容易些。

1.对div的位置和大小进行布局

我们可以将其假想为一个矩形格式的模型，矩形模型如下图所示:

矩形模型主要包括三大属性，正如图上所示,margin,border,padding,(图中的尺寸则为自己设置的模块的weight和height).

margin : 元素边界和其他内容的空白距离，即外边距，分为上下左右四个方向可根据网页需要任意设置。

border：设置 边框宽度，边框样式，边框颜色等。

padding：内部元素和边框之间的空白距离，即内边距，也分为上下左右四个方向，根据网页需要任意设置。

2.在div中插入图片
在此实践过程中并没有什么难度，主要是对文件的路径设置，如果不当则很可能不能导入。
(1)新建一个文件夹,将你在使用过程中所要用到的图片放入此文件夹images。
(2)将HTML文件，CSS文件，以及你新的文件夹images放在同一个文件夹下。
(3)在代码中调用，eg: images/文件名即可。

3.div中颜色的设置

背景颜色，字体颜色都可以参考css种颜色表进行设置。

4.div中的其他标记属性

(1)position定位方式

(2)float:可以设置位于当前div的位置，left，right.

(3)clear:清除在某元素left或right的元素。

(4)z-index：一般情况下取正整数，数字大的会覆盖在数字小的上面。

5.对div中各个标签的定义

在写代码过程中会遇到很多对元素的命名，为了减少代码的长度，在我们写之前，可以先对网页进行一个大致的了解，找出对属性设置一致的一些地方，在对其设置时给其相同的命名，则可以避免代码大量的重复。