一、代碼
<!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,那么默認的為width:auto.
- 只有使用 margin-left+auto 定位的時候，才能使div剛好占滿整個屏幕。
- 可以理解的在使用 margin-left+100% 的時候，div會向右邊多出margin-left的距離。（因為100%是相對於其父元素而言，即當前的body）
四、問題
無法理解的是使用position:relative的時候，不管width如何設置都不能剛好占滿屏幕，why？