平常在寫頁面html**時，經常會使用到width:100%來使控制項寬度為父控制項的內容寬度。但如果父控制項為body，而且沒有明確設定body的寬度，那麼就會出現以下的情況了。
**：
1瀏覽器最大化時：<
body
>
2<
div
style
="background:#888;width:100%;height:200px"
>
3<
div
style
="width:1000px;height:100px;margin:0 auto;border:solid 1px red"
>
div>
4div
>
5body
>
瀏覽器寬度調到出現水平滾動條時：
使用水平滾動條，瀏覽右邊部分時：
結果右邊沒有灰色背景。
分析：在沒有明確設定body的寬度時，body的寬度就是瀏覽器可顯示區域的寬度，上面的例子中可顯示區域的寬度明顯小於1000px，也就是說body的寬度遠遠小於1000px。所以body下的控制項寬度被設為100%時，也只能是等於或小於瀏覽器可顯示的寬度。
解決方法：
1.body設定明確的寬度。
2.如果body不能設定明確的寬度。如主內容居中，兩邊留白處寬度自動，可以在主內容的中設定相同的背景。（注意：對於有邊框的情況，因主內容的父控制項已經設定背景和邊框，而主內容也需要設定背景和邊框，那麼它們重疊的地方會出現邊框加粗的情況，這時把有邊框的作為背景就能達到所要的效果）。
如果您覺得本文的內容有趣就掃一下吧！捐贈互勉！
CSS3中width屬性的calc 使用問題
恭喜博主今天又踩到了乙個坑，繼滾動條問題解決後博主在測試過程中又發現了乙個問題。由於博主的左側選單可以摺疊，博主在摺疊開啟左側選單過程中發現右側主題內容的寬度顯示不正常，上圖說明 初始渲染顯示正常 摺疊選單顯示正常 問題來了，再次開啟發現顯示不正常 博主通過谷歌的開發者工具發現了問題，之前的內容寬度...
10 CSS的屬性縮寫
一些css屬性允許使用一串值代替許多屬性，值使用空格分開。margin,pdding和border width允許合併 margin top width,margin right width,margin bottom width等等，形式像這樣 property top right bottom ...
介紹 10 個 CSS3 屬性
the css ul a a hover transition 有三個引數 the property to transition.set this value to all if needed 轉換屬性。設定此值為所有如有需要 the duration 持續時間 the easing type 緩動...