資訊專欄INFORMATION COLUMN
摘要：用于更改用于計算元素寬度和高度的默認的盒子模型。它有和三種取值。和屬性包括內容，內邊距和邊框，但不包括外邊距。所以，的解釋很符合常理。使用建議使用建議根據項目中的使用經驗和的建議，推薦將屬性設置為。個人網站原文鏈接屬性詳解和應用
box-sizing用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。inherit指的是從父元素繼承box-sizing表現形式，不再冗贅。
content-box默認值，也是css2.1中的盒子模型。在計算width和height時候，不計算border、padding和margin。高度、寬度都只是內容高度。
border-boxcss3新增。 width和height屬性包括內容，內邊距和邊框，但不包括外邊距。
計算公式：
margin從上面可以知道，即時是border-box也是不計算margin，只是多余計算了border和padding。因為border和padding都是盒子模型的一部分，但是margin標記的是盒子和盒子的間距。所以，border-box的解釋很符合常理。
問題來了，如果有時候一定要設置
margin，怎么做到自由控制來保證兼容？例如，我們下面要設置一個撐滿頁面的盒子元素，而且有外邊距干擾，怎么做？
實現如下效果圖：
代碼：源碼下載
yuanxin.me
所以，當需要計算外邊距(margin)，可以配合css3中的四則運算（calc）來使用。
根據項目中的使用經驗和w3c的建議，推薦將
box-sizing屬性設置為border-box。
* {
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}歡迎技術交流，引用請注明出處。
個人網站：godbmw.com
原文鏈接：border-sizing屬性詳解和應用
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1977.html
摘要：在中我們可以通過設置的屬性來完成標準或者怪異模式之間的切換。設為之后，和的厚度可以隨意調，并不會溢出父元素。 - css盒模型是什么網頁設計中css技術所使用的一種思維模型 - 盒模型的組成 showImg(https://segmentfault.com/img/bVboot5?w=736&h=388); - 盒模型的兩種標準（在不考慮css3的情況下） showImg(https:...
摘要：默認盒模型的正方形在上方已經說明了，正方形的被擠壓為時就會得到三角形的效果。這里選擇一種較為取巧的形式，因為這邊使用的是行內樣式，所以可以直接在它的上獲取。面試前還是要為面試刷下題目的，不然真的容易懵 介紹 出門忘帶電源線，快遞到了終于可以繼續水文章了。好不容易獲得一個面試機會，面試官很 Nice，可惜的是當時處于懵逼狀態，錯過了大好的機會： 面試官：巴拉巴拉吧…… 我：嗯，啊，這個，...
摘要：協商緩存從緩存數據庫中取出緩存的標識，然后向瀏覽器發送請求驗證請求的數據是否已經更新，如果已更新則返回新的數據，若未更新則使用緩存數據庫中的緩存數據。 1.CSS的盒子模型 包含元素內容content、內邊距padding、邊框border、外邊距marginbox-sizing:border-box;content-box;inherit;1) content-box:總寬度=mar...
摘要：實際上表示視口寬度的，而不是。同樣，表示視口高度的當視口寬度小于高度時，等于，否則等于。基于的方法這種應該算是最佳的解決辦法實現方法當使用布局時，使用在水平和垂直方向都會居中。 1.自適應內部元素 在css中，不給元素一個height值時，元素會自適應其內部的元素高度，有時我們想讓元素的寬度也達到此效果，應用場景如下。 如下當前的這種布局，想要改成最外層的div的寬度由當前的圖片撐開的...
閱讀 535·2019-08-30 15:55
閱讀 944·2019-08-29 15:35
閱讀 1198·2019-08-29 13:48
閱讀 1910·2019-08-26 13:29
閱讀 2933·2019-08-23 18:26
閱讀 1237·2019-08-23 18:20
閱讀 2834·2019-08-23 16:43
閱讀 2709·2019-08-23 15:58
