DIV+CSS 布局技术

一，DIV+CSS布局技术

一，div布局页面的优点
传统的html标签中，既有控制结构的标签，又有控制变现的标签，还有本意用于控制结构后来被滥用的标签。页面的整个结构标签与表现标签混合在一起
div+css的页面布局不仅仅是设计方式的转变，而且是设计思想的转变，这样为网页设计带来很大的方便
1.缩减页面代码，提高页面的浏览速度
2.缩短了网站改版时间，设计者只要简单地修改css文件即可轻松改版网页
3.字体控制和排版控制，使我们能更好的控制页面布局
4.表现和内容分离，减少网页无效的可能
5.方便搜索引擎的搜索，使用只包含结构化内容的html代替嵌套的标签，所搜引擎将更有效的搜索到内容
二，使用嵌套的div实现页面排版
嵌套的div用于排版更为复杂的页面

二，css盒模型

在使用css进行布局的过程中，css和模型，定位和浮动是最重要的概念控制者页面上元素的显示方式
1.盒模型属性
1.外边距
外边距也称为外补丁。外边距设置属性有margin-top，margin-bottom，margin-left,margin-right，这些属性可以用margin属性，一次设置所有边距。
(1.)上外边距(margin-top)
语法：margin-top:length|zuto
参数：length 是由数字和单位标识符组成的长度值或者百分数，百分数，百分数是基于父对象的高度。auto值被设置为对边的值。
示例：body{margin-top:20%};

(2.)下外边距(margin-bottom)
语法：margin-bottom:length|auto
参数：length 是由数字和单位标识符组成的长度值或者百分数，百分数，百分数是基于父对象的高度。auto值被设置为对边的值。
示例：body{margin-bottom:20%};

(3.)左外边距(margin-left)
语法：margin-left:length|auto
参数：length 是由数字和单位标识符组成的长度值或者百分数，百分数，百分数是基于父对象的高度。auto值被设置为对边的值。
示例：body{margin-left:20%};

(4.)右外边距(margin-right)
语法：margin-right:length|auto
参数：length 是由数字和单位标识符组成的长度值或者百分数，百分数，百分数是基于父对象的高度。auto值被设置为对边的值。
示例：body{margin-right:20%};

以上四个属性可以控制一个要素四周属性，每一个边距都可以有不同的设置，或者设置一个边距。

(5.)右外边距(margin)
语法：margin:length|auto
参数：length 是由数字和单位标识符组成的长度值或者百分数，百分数，百分数是基于父对象的高度。对于内联元素来说，左右外边距可以是负数值。auto值被设置为对边的值。