CSS3之Box-sizing淺談

標籤：back   好好學習   螢幕   問題   學習   ++   解決   images   資料   

前段時間在做一個介面的時候遇到一個問題，給一個長寬都是100%的頁面DIV設定了border之後，這個DIV的長寬竟然超出了100%，這是怎麼回事呢？這對於精通CSS的老大們來說不算問題，可是對於剛入行的我來說就顯得有些木訥，於是找了很多資料瞭解之後才解決這種問題，這裡分享一下，告誡自己不斷學習的重要性。

先看問題，這是我單獨把這一問題的代碼拿出來做的對比（原諒我一螢幕的 “原諒色”）：

  

從以上三張圖可以很清楚的知道，要給DIV設定border之後預設情況下邊界的寬度會在DIV的基礎上再增加，所以想讓border的寬度計算在DIV之內，至於要添加一句CSS屬性box-sizing: border-box;，就可以解決這種問題了。

如果你只是想解決這一問題，那麼以上的內容就可以了，如果想搞清楚這個CSS實現的原理，建議好好學習一下CSS3的Box model;即盒模型，我也是看了這個之後才明白盒模型的具體的一些原理，這裡推薦w3cplus的一篇文章Box Sizing，講述的很詳細。

學會一門語言容易，精通一門語言卻需要很長時間的積累，就像javaScript，學完c++學的js,簡直半天就感覺自己都會了，可是真正寫了一段時間才發現自己的自以為是，javascript也是一門需要深入學習才能明白的語言，原來我以為的以為並不是我以為的以為，謹記。

2017-08-27 12:01:39

 

CSS3之Box-sizing淺談