1

块元素变内联元素 </div><span style="display:block">

2

HTML 元素可分为3类： 块元素（block）、内联元素（in-line）、可变元素

2.1块的特征

1、默认独占一行

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

3、支持所有css命令

2.2内嵌(内联、行内)的特征

1、同排可以继续跟同类的标签

2、内容撑开宽度

3、不支持宽高

4、不支持上下的margin和padding

5、代码换行被解析

2.3可变元素特征

display：block 显示为块
使内联元素具备块属性标签的特性

display：inline 显示为内嵌
使行块属性标签具备内联元素的特性

display：inline-block;
Inline-block的特点和问题
特性：

1、块在一行显示；

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

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

问题：

1、代码换行被解析；

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

3清除浮动

3.1、加高度（扩展性不好）

3.2、给父级加浮动（页面中所有元素都加浮动，margin左右自动失效）

3.3、inline-block（margin左右auto失效）

3.4、空标签清除浮动

3.5、父级div定义 overflow:hidden

3.6、父级div定义 display:table

3.7、父级div定义 伪类:after 和 zoom

我能说我喜欢空标签么。。。喜欢他的短小

4

4.1Block Formatting Context Context

当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是[HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。怎样才能形成Block Formatting Context当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context•float的值不为none。•overflow的值不为visible。•display的值为table-cell, table-caption,中的任何一个。•position的值不为relative和static。

4.2

float 设置为除 none 外的取值；
overflow 设置为除 visible 之外的取值；
position 设置为除 static 及 relative 之外的取值；
display 设置为 table-cell、table-caption、inline-block 中的任一取值

5

absolute生成的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。fixed生成[绝对定位]的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。relative!生成[相对定位]的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。static[默认值]。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit规定应该从父元素继承 position 属性的值。

6

6.1绝对定位

它是相对不是static最近一级父元素来进行定位的，被定位元素会脱离文档流，然后我们可以通过left,right,top,bottom来调整元素的位置

特点：

1.完全脱离文档流，

2.提升层级等级，

3.针对父级定位，如果父级没有定位，那就找父级上一级定位，如果父级上一级没有定位，最终以docment进行定位，

4.绝对定位一般配合相对定位使用，相对定位是父级，绝对定位是子级，

5.支持所有CSS样式，

6.提升定位元素层级的命令 z-index数字越大，越向上显示，

7.如果绝对定位的子集有浮动，可以不做清除浮动操作。

6.2相对定位

也就是相对于自己在文档流中的位置进行定位。

特点：

1.不脱离文档流，原有空间位置被保留，

2.针对自己本身位置进行定位，

3.不影响元素本身属性的设置

注意：

1.如果一个定位元素，同时设置了top和bottom，top的优先级更高，会显示top的值，

2.如果同时设置Left和right的值，优先级取决于网页语言，在英语网页中left的优先级更高，会显示left的值，在阿拉伯语言网页中right的优先级更高，

3.如果一个元素设置了相对定位（甚至是做了偏移），其他元素排版时参考的依然是那个原有位置（没有设置偏移前的位置），

4.如果一个元素设置了相对定位，它的原有位置空间被保留。即使该元素做偏移，其他元素也不会占据它原有的（偏移前）的位置。

6.3固定定位

是相对浏览器窗口（docment）进行定位的，同样也是脱离文档流，可以通过left，top，right，bottom来调整元素所在的位置。

特点：

1.一般用来做页面的导航部分与底部，

2.可以用来网页中插入广告和商业推广。

注意：在使用时候，尽量使用在页面的底部，因为即使脱离文档流也不会影响布局

6.4几种定位简单比较总结

1.position：relative;不会脱离文档流

2.position：absolute|fixed；脱离文档流

3.absolute是相对于父级非static进行定位

4.fixed始终是相对于浏览器窗口进行定位

定位的用途：

1.图片的叠加

2，元素的垂直居中

3.布局位置的改变

4，广告植入

7

用x-index啊
<style>
.div{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.div2{
position:absolute;
left:0px;
top:0px;
z-index:1;
}

8

一个大的box装着div1和div2，div1左上移动，然后div2用opacity设置透明度

9

合并行属性<td rowspan="跨度的行数"></td>
合并列属性<td width= "25% " colspan="2" > 　 </td>

10

body{text-align:center}