在我們討論寬度的時候，我們應該講下與它相關的乙個重點知識：盒模型。當你設定了元素的寬度，實際展現的元素卻能夠超出你的設定：因為元素的邊框和內邊距會撐開元素。看下面的例子，兩個相同寬度的元素顯示的實際寬度卻不一樣。
.******
.fancy
我比它大！
以前有乙個代代相傳的解決方案是數學。css開發者需要用比他們實際想要的寬度小一點的寬度，需要減去內邊距和邊框的寬度。值得慶幸地是你不需要再這麼做了...
經過了一代又一代人們意識到數學不好玩，所以他們新增了乙個叫做box-sizing的css屬性。當你設定乙個元素為box-sizing: border-box;時，此元素的內邊距和邊框不再會增加它的寬度。這裡有乙個與前一頁相同的例子，唯一的區別是兩個元素都設定了box-sizing: border-box;：
.******
.fancy
萬歲！既然沒有比這更好的方法，一些css開發者想要頁面上所有的元素都有如此表現。所以開發者們把以下css**放在他們頁面上：
*既然box-sizing是個很新的屬性，目前你還應該像我之前在例子中那樣使用-webkit-和-moz-字首。這可以啟用特定瀏覽器實驗中的特性。同時記住它是支援ie8+。
**：稍有改動
css 盒模型的內邊框
內邊距 padding 內容區和邊框之間的距離是內邊距 一共有四個方向的內邊距 padding top padding right padding bottom padding left 內邊距的設定會影響到盒子的大小 背景顏色會延伸到內邊距上 一共盒子的可見框的大小，由內容區 內邊距 和 邊框共同...
CSS 之盒子模型 邊框 內邊距 外邊距
使用width來設定盒子內容區的寬度 使用height來設定盒子內容區的高度 width和height只是設定的盒子內容區的大小，而不是盒子的整個大小，盒子可見框的大小由內容區，內邊距和邊框共同決定 為元素設定邊框 要為乙個元素設定邊框必須指定三個樣式 border width 邊框的寬度 bord...
CSS盒模型之內邊距padding
css 盒模型 box model 規定了元素框處理元素內容 內邊距 邊框 和 外邊距 的方式。元素框的最內部分是實際的內容，直接包圍內容的是內邊距 padding 內邊距呈現了元素的背景。內邊距的邊緣是邊框 border 邊框以外是外邊距 margin 外邊距預設是透明的，因此不會遮擋其後的任何元...