如果你寫過css或者你接觸過css，相信你一定對盒子模型一點都不陌生。css其中乙個讓人比較困惑的地方就在於它的盒子模型中關於高度和寬度的計算，別說那些初學者了，就是寫過很久css的人也一樣會有如此的感覺。css中的高度和寬度總是不那麼直觀，讓你總是很困惑，不能一眼就能分辨出其高度和寬度。有的時候你希望它的寬度是100px，但實際情況卻總不是這樣。然而，設定正確的box-sizing的屬性，盒子的高度和寬度會的確就是你設定的100px。是否有點暈了呢，好了，下面我詳細介紹下。
1、盒子模型
關於css重要的乙個概念就是css盒子模型。它控制著頁面這些元素的高度和寬度。盒子模型多少會讓人產生一些困惑，尤其當涉及到高度和寬度計算的時候。真正盒子的寬度（在頁面呈現出來的寬度）和高度，需要加上一些其它的屬性，例如：
padding+border+width= 盒子的寬度
padding+border+height= 盒子的高度
這看起來並不是那麼直觀，那麼我們看乙個圖：
這意味著，如果我們設定乙個寬度為200px，而實際呈現的盒子的寬度可能會大於200px（除非沒有左右邊框和左右補白）。這可能看起來比較怪，css設定的寬度僅僅是內容區的寬度，而非盒子的寬度。同樣，高度類似。
這導致的直接結果是當我們希望頁面呈現的盒子的寬度是200px的時候，我們需要減去它的左右邊框和左右補白，然後設定為對應的css寬度。例如上圖，我們設定希望盒子寬度為200px，則需要先減去左右補白各20px，左右邊框各1px，然後設定對應的css寬度158px。這讓**看起來有點匪夷所思，尤其是對新手來說（我就在這個問題上困惑了很久）。我明明設定的寬度是158px，它卻呈現了200px。這多少有點不那麼直觀和一目了然。
幸運的是，我們有更好的方法達到我們想要的目的。
2、box-sizing
與上面不同的是，當你設定box-sizing:border-box以後，這就能達到你想要的目的。例如，上面我們想要乙個寬度為200px的盒子，那麼我們直接設定寬度為200px。是不是看起來清晰多了。當再設定它的左右邊框和左右補白後，它的內容區會自動調整。這可能更直接和一目了然。css**如下：
1
2
3
4
5
6
div
如下圖：
實際上，這更被設計者和開發者推崇。
3、box-sizing其它的值
box-sizing同樣可以設定為content-box，這樣設定css的寬度的時候僅僅是設定的它的內容區的寬度，瀏覽器預設都是如此。如我們1中舉得例子。
box-sizing也可以設定為inherit，也就是說從父級元素中繼承該屬性。
4、瀏覽器相容性
ie8及以上版本支援該屬性，firefox 需要加上瀏覽器廠商字首-moz-，對於低版本的ios和android瀏覽器也需要加上-webkit-。實際上，很多reset.css或者normal.css裡都包含如下css語句，也是比較贊成的用法：
1
2
3
4
5
*, *:before, *:after
結束語看到這兒，相信你肯定明白了box-sizing的含義。那麼同樣告訴你的是，這是很多前端面試題常見的知識點之一。面試官通常會問你，css設定如下語句後*,其作用是什麼？相信你看到現在肯定會清楚的回答這個問題了。
模組化 CSS 讓你更加有效地去管理 CSS
在剛學習css初期，就接觸了 模組化css 這樣的概念，不過，一直沒有www.cppcns.com很好的理解。說起來，理由很簡單 因為幾乎所有的 都是為了部落格的設計，而像部落格這麼小的架構，css檔案根本不用多，因為本身 量就小，使用不同表現形式的頁面模板並不多，少反而更方便管理。所以，對於模組化...
使用CSS3特效讓你的頁面選單變得更加有趣
在這篇文章中，我們將介紹一些快速而有效的方法來實現css3的選單特效。這裡我們將新增乾淨漂亮的懸浮特效來給你的選單新增更多樂趣。希望大家喜歡！首先在每個選單專案中我們包含乙個帶有倆個span元素的鏈結，如下 我們賦予這個.mh mnu li a的屬性diplay block並且rgba 255,25...
使用CSS3特效讓你的頁面選單變得更加有趣
在這篇文章中，我們將介紹一些快速而有效的方法來實現css3的選單特效。這裡我們將新增乾淨漂亮的懸浮特效來給你的選單新增更多樂趣。希望大家喜歡！首先在每個選單專案中我們包含乙個帶有倆個span元素的鏈結，如下 我們賦予這個.mh mnu li a的屬性diplay block並且rgba 255,25...