CSS2 3 div+css布局

一,无意义的标签div ，span
div:大的区域的意思,默认换行
span:小的行内的意思,默认不换行


二,经典的盒子模型
div就比喻成1个盒子
盒子应该有的内容:
边框，border
高度, height
宽度, width
内容与边框的距离(内边距),padding
盒子与盒子之间的距离(外边距) margin

三,ie和其他浏览器中宽度高度问题
ie浏览器的宽度包括了 border padding的宽度,其他浏览器宽度不包括这些宽度，为了解决这个兼容性问题，所以引入!important 其他浏览器会参照这个关键字,ie浏览器不参照这个关键字
width:400px !important(其他浏览器)
width:350px


四,和页面布局有关的css属性
从上往下写是文档流,如果设置了position就脱离了文档流
1,position 默认是static
a,绝对定位absolute 相对于浏览器的左上角的点而言,配合top,left两个属性使用
  top:相对于顶部的距离 left:相对于左边的距离
  z-index只能结合absolute使用,决定层的覆盖关系
  应用场景是结合js做漂浮的广告
b,相对定位relative 相对于原来文档流的位置变化,配合top,left两个属性使用
  top:相对于顶部的距离 left:相对于左边的距离
c,固定定位 fixed 不会随着滚动条变化而变化固定位置,配合top,left两个属性使用

2,text-align 设置文本位置（水平方向设置居中等），默认的盒子中的文本内容是靠左的left,可以设置为center,right

3,line-height:由于内容都是在行的中间,所有设置这个属性可以达到内容垂直居中的效果

4,display
inline将换行的标签改为不换行的标签,
block将不换行的标签变为换行的标签
none:隐藏此区域,内容也隐藏,位置变化

visibity:hidden 内容隐藏,位置不变，还是会占用原来的位置,这是它跟display:none的区别

5,overflow内容超出部分处理
hidden:超出部分隐藏
scroll:超出部分隐藏，无论是否超出都会出现滚动条
auto:超出部分出现滚动条，没有超出部分不出现滚动条


6,float漂浮 脱离文档流,出现新的一层,和position开启新的一层一样，不在一层
如果上层有足够的空间才会上浮，如果没有足够的空间,则会换行
clear:left设置它自己左边不能有浮动块,只有自己换行
clear:both设置它自己左右边都不能有浮动块
clear:right设置它自己右边不能有浮动块