CSS层叠样式表——DIV+CSS布局

   DIV+CSS布局

1   div和span

   DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式

   DIV和SPAN的区别在于，SPAN是内联元素，DIV是块级元素

2   盒模型

   margin   盒子外边距

   padding   盒子内边距

   border   盒子边框宽度

   width   盒子宽度

   height   盒子高度

3   布局相关的属性

3.1   position   定位方式

   正常定位   relative

   根据父元素进行定位   absolute

   根据浏览器窗口进行定位   fixed

   没有定位   static

   继承   inherit

3.2   定位

   离页面顶点的距离   left（左），right（右），top（上），bottom（下）

3.3   z-index   层覆盖先后顺序（优先级）

3.4   display   显示属性

   display:none   层不显示

   display:block   块状显示，在元素后面换行，显示下一个元素

   display:inline   内联显示，多个块可以显示在一行内

3.5   float   浮动属性

   left   左浮动

   right   右浮动

3.6   clear   清除浮动

   clear:both

3.7   overflow   溢出处理

   hidden   隐藏超出层大小的内容

   scroll   无论内容是否超出层大小都添加滚动条

   auto   超出时自动添加滚动条

4   兼容问题及高效开发工具

4.1   兼容性测试工具

   IE  Tester

   Multibrowser

4.2   常用的浏览器

  Firefox

   Google  chrome

   opera

4.3   高效的开发工具

4.3.1   轻级的

   Notepad++

   sbulime  Text

   记事本                                  根据自己的需要来选择

4.3.2   重量级的

   WebStorm

   Dreamweaver

4.4   网页设计工具

   fireworks

   photoshop

5   判断IE的方法       条件注释只在IE浏览器

5.1   条件判断格式

   <!--[if  条件  版本]>  那么显示  <![endif]-->

5.2   不等于

  [if  !IE  8]      除了IE8都可以显示

5.3   小于

   [if   it  IE  5.5]       如果IE浏览器版本小于6的显示

5.4   大于

   [if  gt  IE  5]      如果IE浏览器版本大于5的显示

5.5   小于或等于

   [if  lte  IE  6]      如果IE浏览器版本小于6的显示

5.6   大于或等于

    [if  gte  IE  7]      如果IE浏览器版本小于7的显示

5.7   大于和小于之间

    [if   (gt  IE  5)&(it  IE  7)        如果IE浏览器版本大于IE5小于7的显示

5.8   或

    [if  (IE  6)|(IE  7)]      如果是IE6或者IE7显示

5.9   仅

   <!--[if  IE  8]>      如果是IE8，就只显示IE8

6   《DIV+CSS网页布局实战》

   先分析，再切图，然后搭建框架，慢慢的循序渐进，下一步解决兼容，最后完成