【CSS】四、DIV+CSS布局

CSS 一、使用CSS样式的方式
CSS 二、定义样式表
CSS 三、常见属性
CSS 四、DIV+CSS布局## 四、DIV+CSS布局

1.div和span

DIV和SPAN在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式
DIV和span的区别在与，span是内联元素，div是块级元素
* DIV占据整个一行；span只占用一小部分，内容多少占用位置多少

2.盒模型

• margin 盒子外边距
• padding 盒子内边距
• border 盒子边框宽度
• width 盒子宽度
• height 盒子高度

3.布局相关的属性

1) position 定位方式

• 正常定位 relative
• 根据父元素进行定位 absolute
• 根据浏览器窗口进行定位 fixed
  * 滚动页面其位置不变，如部分网页中的客服
• 没有定位 static
• 继承inherit

2) 定位

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

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

z-index:1
1 2 3 4 5 6...表示优先级

4) display 显示属性

display:none 层不显示
display:block 块状显示，在元素后面换行，显示下一个块元素
display:inline 内联显示，多个块可以显示在一行内

5) float 浮动属性

• left 左浮动
• right 右浮动

6) clear 清除浮动

clear：both

7) overflow 溢出处理

• hidden 隐藏超出层大小的内容
• scroll无论内容是否超出层大小都添加滚动条
• auto 超出时自动添加滚动条

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

1) 兼容性测试工具

• IE Tester
• Multibrowser

2) 常用的浏览器

• Google chrome
• Firefox
• opera

3) 高效的开发工具

根据自己的需要来选择

轻量级的： Notepad++、sbulime Text、记事本
重量级的：WebStorm、 Dreamweaver

4) 网页设计工具

• fireworks
• photoshop

5.判断IE的方法

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

• 不等于
  [if !IE 8] 除了IE8都可以显示
• 小于
  [if lt IE 5.5] 如果IE浏览器版本小于5.5的显示
• 大于
  [if gt IE 5] 如果IE浏览器版本大于5的显示
• 小于或者等于
  [if lte IE 6] 如果IE浏览器版本小于6的显示
• 大于或等于
  [if gte IE 7] 如果IE浏览器版本小于7的显示
• 大于和小于之间
  [if (gt IE 5)&(lt IE 7)] 如果IE浏览器版本大于IE5小于7的显示
• 或
  [if (IE 6)|(IE 7)] 如果是IE6或者IE7显示
• 仅
  <! --[if IE 8]> 如果是IE8

注意⚠️：条件注释只有在IE浏览器下才能执行，这样就达到了我们的效果！

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

分析+切图+搭建框架

循序渐进>解决兼容>大功告成