一、代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .bb{ background: burlywood; height: 50px; margin-left: 100px; width: 100%; } .cc{ background: burlywood; height: 50px; margin-left: 100px; /*此为默认的，等同于不写*/ width: auto; } .dd{ background: burlywood; height: 50px; position: relative; left: 100px; width: 100%; } .ee{ background: burlywood; height: 50px; position: relative; left: 100px; /*此为默认的，等同于不写*/ width: auto; } </style> </head> <body style="position: relative"> <div class="bb"></div> <br> <div class="cc"></div> <br> <div class="dd"></div> <br> <div class="ee"></div> </body> </html>
二、效果图
最左边的时候：
最后边的时候：
三、结论
- div不明确设置width,那么默认的为auto.
- 只有使用 margin-left+auto 定位的时候，才能使div刚好占满整个屏幕。
- 可以理解的在使用 margin-left+100% 的时候，div会向右边多出margin-left的距离。（因为100%是相对于其父元素而言，即当前的body）
四、问题
无法理解的是使用position:relative的时候，不管width如何设置都不能刚好占满屏幕，why？