div+css样式兼容性

一、样式链接：
样式 <style type=”text/css”></style>
外部链接 <link rel=”stylesheet” href=”ivy.css” type=”text/css”>
二、DHTML三个部分：结构（DIV）、表现（CSS）、行为(JavaScript)
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义了如何显示 HTML元素，（颜色、宽度、高度、边框等）
样式通常存储在样式表中 （样式表是一个css文件)
把样式添加到 HTML/XHTML 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
三、盒子模型
CSS 中有个重要的概念，就是盒子模型 (Box model)。
先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。
盒子里由里至外依次是：
• content (内容，比如文本，图片等)
• padding 填充，或称作间隙 (也有人称做补丁)
• border 边框
• margin 边距

margin 是调整div与body、DIV与DIV、div与ul、ul与ul 、ul与li、li与li、（块与块）之间的间距

//li图片头http://www.lanrentuku.com/js/css-157.html
#top7_middle_bottom li { list-style-type:none;background: url(img/arrow.gif) left center no-repeat; line-height:1.7em;text-indent:15px;margin-left:5px; width:325px;}

margin-top、margin-bottom、margin-left、margin-right

//margin:10px; // top right bottom left
//margin:10px 5px 15px; top (left right) bottom
//margin:10px 5px; (top bottom) (left right)
一个值上下2个方向，第二个值代表左右2个方向

//margin:5px 10px 15px 20px; top right bottom left;
代表是 上 右下 左 顺时针走~
padding 是调整块与内容（文字、图片）之间的间距，也可以调块与块间的间距
上下如果用padding 高度就要减去所用的值
左右用padding 宽度就要减去所用的值
一定要计算好，差一像素也不成。

两个DIV之间的实际距离，以两个DIV的margin的大值为准。
IE盒子模型:

标准盒子模型:（非ie）

两个div之间的垂直空白边会叠加(margin使用大值）。
行内框、浮动框或绝对定位框之间的空白边不会叠加（div加了float属性后，margin使用两者的margin相加）。
盒子模型.html、盒子模型1.html

实际开发中，可以把所有div加上float属性，让其margin不叠加。
盒子模型2.html
四、兼容性
在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网站可能出现不可预料的效果！
IE6 文字颜色红色、ie7或FF 黑色1.html、2.html
宽度问题、高度问题、错位问题、出现问题
以下解决方法
主要有2个常用方法
1：!important有优先级 他的前面是火狐、ie8，剩下的值是IE6
例如：_width:180px;(只有ie6认识)
Width:200px;width:300px !important;
Width:200px !important;width:300px;
2：黑客用法(hack)
#a { width:100px;border:1px solid #ccc; } /* Moz FF宽度为100带边框*/
* html { width:300px; border:1px solid #ccc;} /* IE6 宽度为300带边框*/
*+html #a { width:600px;border:1px solid #ccc; } /* IE7 宽度为600带边框*/
先不看IE6 以IE8和FF为准 
清除浮动！clear:both;
float:left时，clear:left起作用，clear:right不起作用。
float:right时，clear:right起作用，clear:left不起作用。
clear:both;对float:left,float:right;都有效。

五、 其他
常用缩写
//border :1px Solid #CCC;
//background:#FFF URL(../images/1.jpg) no-repeat fixed left top;
//color:#CDF;
//a:link ,a:visited ,a:hover,a:active 定义链接的四种状态要注意先后顺序: Link Visited Hover Active //定义A标签要注意的小问题
A{}
A:visited{clolor:red;}
当我们定义a{color:red;}时，它代表了A的四种状态的样式，如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了，其它三种状态就是A中所定义的样式．
只定义了一个a:link时，一定要记得把其它三种状态定义出来,而且在注意顺序！