标签：
块级元素不设置宽度时默认占父元素的100%~如果块级元素没有设置大小~同时又给该块级元素设置了绝对定位~那它会缩成一个点~下面一段代码：
<!DOCTYPE html> <html> <head ln="en"> <meta charset="utf-8"> <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <title>hehe</title> <style> .div1 { background-color: #c0c; } .div2 { border: 1px solid red; } .div3 { height: 32px; width: 32px; border:1px solid lightgreen; } </style> </head> <body id="main"> <div class="div1"> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
运行结果如下：
可以看到~父元素没有设置大小~未设置大小的子元素的宽占满整个父元素的宽~设置了大小的子元素则按设置的大小显示
如果给父元素加一个绝对定位~修改如下：
<!DOCTYPE html> <html> <head ln="en"> <meta charset="utf-8"> <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <title>hehe</title> <style> .div1 { background-color: #c0c; position: absolute;/*设置父元素为绝对定位*/ } .div2 { border: 1px solid red; } .div3 { height: 32px; width: 32px; border:1px solid lightgreen; } </style> </head> <body id="main"> <div class="div1"> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
运行结果为：
父元素没有设置大小~此时如果把定位设为绝对定位~那原本父元素应该会缩到左上角变为一个点~但是因为父元素的子元素总有一个子元素设置了大小~所以父元素缩小到刚好包住子元素就不能在缩小了
标签：
原文地址：http://www.cnblogs.com/Liujunyan/p/4982775.html
