HTML制作块形状浮动,HTML/CSS 块、内嵌、浮动、定位元素的特点对比

内联，内嵌，行内属性标签——————————————–

1、默认同行可以继续跟同类型标签；

2、内容撑开宽度

3、不支持宽高

4、不支持上下的margin和padding

5、代码换行被解析成空格

块属性标签————————————————————-

1、默认独占一行显示；

2、没有宽度时，默认撑满一排

3、支持所有css命令

inline-block标签——————————————————–

特性：

1、块在一行显示；

2、行内属性标签支持宽高；

3、没有宽度的时候内容撑开宽度

问题：

1、代码换行被解析；

2、ie6 ie7 不支持块属性标签的inline-block;

浮动:——————————————————–

1.使块元素在一行显示

2.使内嵌支持宽高

3.不设置宽度的时候宽度由内容撑开

4.脱离文档流

5.提升层级半层

相对定位——————————————————–

1.不影响元素本身的特性；

2.不使元素脱离文档流；

3.如果没有定位偏移量，对元素本身没有任何影响；

ie6 下父级的overflow:hidden;是包不住子级的相对定位的

绝对定位——————————————————–

1.使元素完全脱离文档流；

2.使内嵌支持宽高；

3.块属性标签内容撑开宽度；

4.如果有定位父级相对于定位父级发生偏移，

没有定位父级相对于整个文档发生偏移；

5.相对定位一般都是配合绝对定位元素使用；

position:fixed； 固定定位——————————————————–

与绝对定位的特性基本一致，

差别是始终相对整个文档进行定位；

问题：IE6不支持固定定位；

** 文档流是文档中可显示对象在排列时所占用的位置

总结：

元素的宽度由内容撑开的标签:

display:inline;

display:inline-block;

float

position:absolute

position:fixed

clear:left/right/both/none 元素的某个方向不能有浮动元素