一、四個理論
1. 某div不顯示設置寬度，那么width為auto.
2. 某div的width在默認情況設置的是盒子模型中content的值
3. 某div的width為100%表示的是此div盒子內容部分的寬度為其父元素的寬度。
4. 某個div的width不設置，或者設置為auto,那么表示的這個div的所有部分（內容、邊框、內邊距等的距離加起來）為父元素寬度。
二、小注意點
1. 有些時候，設置了某個div的背景，但是看不到，有可能是高度為0，也有可能是寬度為0.
三、實例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/layout2.css"> </head> <body> <div class="container"> <div class="content1"> </div> <div class="content2"> </div> </div> </body> </html>
* { padding: 0; margin: 0; } .container { width: 100%; height: 1000px; } .content1{ background: yellowgreen; width: auto; height: 100px; padding-left: 100px; } .content2 { background: gold; width: 100%; height: 100px; padding-left: 100px; }
展示效果如下，綠色的div寬度剛好是整個瀏覽器寬度，黃色的div寬度卻多了100px,原因就是width僅僅設置的為內容區域的寬度，左邊多了100px，當然background設置的為整個div的背景色：
