之前在學習bootstrap的過程中，遇到各種奇葩的坑，如果在學習bootstrap之前，準備工作先做好，就可以或多或少的避開一些坑。下面小編開始給大家介紹border-box這個屬性的知識。
在boostrap自帶的css檔案：boostrap.css中，有這樣一段**：
* 這意味著在寫**時，這個屬性將無處不在。那這個box-sizing:boder-box究竟是什麼鬼呢？讓我們先來看看一段很普通的**：
www.cppcns.comv>
執行**得出：outer的高度為702px，寬度為702px，inner的寬度為500px，高度為500px；這裡大家應該都沒什麼疑問吧，我們現在看看另外一段**：
*
程式設計客棧
這段**其實就是頭兩段**的相加，可以簡單的理解為現在是在boostrap的框架中開始寫**，**執行的結果為：outer的寬度為500px，高度為500px；inner的寬高為298px；
導致這樣的結果的原因是：box-sizing:border-box使得元素的寬高不會受padding和border的影響，如上面的**，即使outer有padding,border,但是padding和border都不會影響outer的寬高，outer的寬高還是500px；但是padding和border跑**去了？答案：跑到裡面去了！開啟瀏覽器的除錯工具，看outer的樣式詳情：
我們可以明顯的看到，padding和border都是有效的，只是它們佔據了outer的內部空間，由於padding:100px佔據了outer的200px寬高值，border佔據了2px的寬高值，所以inner只能獲得298px的寬高值。
如果大家有ie下的網頁開發經驗的話，就會發現，box-sizing:border-box就是低版本ie的怪異模式。
以上所述是小編給大家介紹的boostrap入門準備之border box的相關知識，大家都學會了嗎，如果有疑問歡迎給我留言，小編會及時回覆大家的。同時也非常感謝大家對我們**的支援！
下面給大家介紹box-sizing border-box 的理解
-webkit-box-sizing: border-box; 則div 設定的寬高將包含 邊框及 padding
box-sizing
普通特殊
《程式設計客棧/html>
本文標題: boostrap入門準備之border box
本文位址:
webdriver入門之環境準備
1.安裝ruby ruby v 2.安裝webdriver 確保機器聯網，用gem命令安裝是在有網路的情況下進行的，開啟cmd，執行以下命令，安裝的速度就看網速的快慢了 gem install selenium webdriver 安裝好了之後可以輸入以下命令檢驗是否安裝成功，成功則會顯示webdr...
Python入門系列之準備動作
python系列的學習 簡潔的說一下python？python是乙個叫 龜叔 guido van rossum的人在1989年聖誕節期間，為了打發無聊的聖誕節而編寫的乙個程式語言。所以重點 python是乙個 程式語言 什麼是程式設計，我想不需要廢話，既然都來學習python了，還沒搞明白什麼是程式...
機器學習入門準備
歸一化就是將資料經過某種演算法限制在一定範圍內，一是為了處理資料的方便，二也可以保證程式執行時收斂速度加快 比如梯度下降演算法 精度加高，本質上似乎為了使得各個特徵維度對目標函式的影響權重是一致的 和歸一化看上去十分地類似，不過其實和歸一化也沒有必要區分地特別清楚，標準化是對特徵維度大小的伸縮，使得...