1.图片的大小时200 201，我给包含他的div设置的是300 100，下面的div的margin值是60，发现图片会把下面的div给盖住。就算是给下面的div设置了overflow；hidden属性还是不行。加上宽度也是不行的。
2.下面再给图片设置一个绝对定位。此时div2的位置并没有发生什么变化。
3.图片为绝对定位之后，我把包含他的div块的高度不设置，发现父元素没有了。然后加上高度，不设置宽度，这样还是有div块的存在的，占满整行。宽高都不设置的时候也是不存在了。
4.如果一个元素设置绝对定位，但是不给他设置left这些值，他的位置是在哪里。这里的正确答案是：相当于static的默认位置。不是都在左上角。测试：我在图片的父元素里面在加上一个div，发现这个div占了一个小块块之后，图片就被挤到了他下面的那一行。这个位置也就是他之前的默认的static的时候的位置。
5.现在我来给他设置left这些值。设置了left是300px，发现他是相对于html来偏移的。因为body有一个外边距，他都没有。他是找到距离他最近的一个非static的祖先元素。
6.如果我把那个他上面的div设置成了inline，他就不见了，图片也就顺势顶上去了。此时我再把这个设置成inline的div里面加上字符，他就会被撑起来。但是此时的图片就跟他在同一行了。如果我是吧他设置成inline-block，发现他就不会消失不见，而是图片和他在一行中显示。inline是该元素挥别显示成内联元素，而inline-block则是会被显示为行内的块元素。把它设置成为了inline元素后发现不论怎么改变他的宽高都是没有作用的，他并没有什么变化。不管宽高有没有。p标签也是一个块级标签，如果把他设置成了inline 的话也是必须里面有东西他才会显示出来，否则是不会的。p就算是作为块级元素也是，必须得里面有元素才能显示出来，跟div一样。p元素应该是有一个默认的外边距。p作为块级元素是可以修改其高度的。然后把它的line-height： 设置和高度一样，则可以使文字居中。
这些inline的和span标签类似，必须得里面有东西才能显示出来。字体的大小也和span标签里面的是一样的。都是继承与body的字体大小。对span标签设置高度根本不管用。对它设置字体的大小还可以改变器高度。然后改变其line-height; 他的大小也还是没有变，只是。。上图。
7.若包含绝对定位的元素没有设置宽高，则把它设置成绝对定位，父元素就塌陷了。用div3设置了left top值也是相对于html来说的。
8.看到了下面的div会覆盖在img上面。猜想他是按照代码的先后顺序来排的。在网上查到了我们使用position实现绝对定位，对父级设置position:relative属性，对其子级设置position:absolute加上left或right和top或bottom实现子级在父级内任意定位。在原始情况下重叠是按DIV代码本身顺序排列，越后输入的DIV盒子其越靠前（浮在上面）。除了改变源代码本身div代码在html顺序，我们还可以使用css z-index实现DIV层排列顺序。
9.再次测试上面的理论。我又加了一个div他有相对定位，然后让其里面的div绝对定位，那么他现在绝对定位是相对于其父元素，而不是跟之前的一样相对于html。但是他的层叠顺序还是按照代码的顺序来层叠的，我把它放到后面，则层叠在上面。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1 { margin: 30px; background: red; width: 300px; height: 100px; } img { position: absolute; } #div2 { margin: 60px; background: yellow; overflow: hidden; } #div3 { width:200px; height: 100px; background: red; } </style> </head> <body> <div id="div1"> <img src="082211207.jpg"/> </div> <div id="div2"> <div id="div3"></div> </div> </body> </html>
