資訊專欄INFORMATION COLUMN
摘要：在中我們可以通過設置的屬性來完成標準或者怪異模式之間的切換。設為之后，和的厚度可以隨意調(diào)，并不會溢出父元素。
- css盒模型是什么
網(wǎng)頁設計中css技術(shù)所使用的一種思維模型
- 盒模型的組成
- 盒模型的兩種標準（在不考慮css3的情況下）
兩種模型唯一的差異就在元素寬高度的定義
w3c標準模型的 元素寬高＝內(nèi)容（content）的寬高
IE模型的 元素寬高＝內(nèi)容（content）＋填充（padding）＋邊框 （border） 的總寬高
在html頭部有一個聲明，瀏覽器會根據(jù)這個聲明來判斷文件是什么類型的，也會根據(jù)這個聲明來解析文件
當我們寫了doc聲明的時候，無論哪種內(nèi)核的瀏覽器都會解析為標準模型，元素寬度＝content的寬度，即當我們設置width：100px的時候，這個寬度指的就只是content的寬度
總寬度＝我們設置的width＋padding＋border
當頭部的doc聲明缺失的時候，部分ie內(nèi)核的瀏覽器則會觸發(fā)ie模式 即怪異模式（ie6，7，8）width＝content＋padding＋border
總寬度＝width
- 為什么會出現(xiàn)不同模型
當年微軟的IE瀏覽器占據(jù)超過80%市場份額的時候，想自己獨立制定一套瀏覽器標準，其中就包括IE的盒模型，但是有很多公司不同意IE的做法，他們遵循的是W3C的標準來定制瀏覽器，也就造成了現(xiàn)在瀏覽器不同的CSS盒模型，但是仍有很多老網(wǎng)站采用的是老IE的標準(怪異模式)，因此很多瀏覽器保留了IE的怪異模式。
- box-sizing
在CSS3中我們可以通過設置 box-sizing的屬性來完成標準或者怪異模式之間的切換。
（1）box-sizing ： content-box 采用標準模式 也是默認樣式
（2）box-sizing： border-box 采用ie怪異模式
- content-box的缺點
目前任何瀏覽器默認使用的都是content-box，但是這個內(nèi)容盒子有一個缺點，舉個栗子
假設我們想要兩個子容器float:left，寬度各50%，然后給一點padding，最后讓子容器并排充滿父容器，代碼如下
Title left-boxright-box
我們在瀏覽器中運行之后發(fā)現(xiàn)，想象的很美好 結(jié)果卻并不美好，因為兩個子元素寬度超過了50%，導致了折行，于是寬度就不能設置為50%了，只能將寬度減去padding的值，在這種時候，border-sizing就派上用場了
了解border-sizing
border-sizing是css3新增的聲明，很多開發(fā)者可能都不曾用過，既然標準模型誕生的早，又叫標準模型，為什么還要出現(xiàn)border-sizing呢
border-sizing的優(yōu)點
border-sizing的誕生就是為了解決content-sizing的缺點，border－sizing意味著子容器的padding和border厚度都算在50%內(nèi)，這樣你就可以隨意修改padding和border的值，而不用擔心父容易被撐爆
border-sizing的兼容性
ie8也支持該屬性，所以不用擔心兼容性問題
border-box的使用場合
目前最流行的css框架幾乎都采用了border－sizing，框架想要具備柵格系統(tǒng)，肯定要用border－sizing
通常情況下 你只需要在必須使用border－sizing元素的身上使用這個屬性，其他元素都保持content－sizing就好了
子元素有padding和border，或者至少有其一，并且需要給子元素設定100%寬度（或者50%寬度等等），這時候顯然需要border-box。設為border-box之后，padding和border的厚度可以隨意調(diào)，并不會溢出父元素。如果是content-box，那么，寬度必然會溢出，而且，為了不溢出，你設定子元素的寬度就只能是一個定值，或者是一個計算值（比如calc(100%- 20px)）。
由于之前一直對于css盒模型的理解模棱兩可，所以最近趁有時間查了很多相關(guān)文章，歸納了以上內(nèi)容終于搞懂了這個難啃的骨頭，參考的資料有以下幾篇文章，感興趣的可以自己查閱，由于自己也是邊理解邊總結(jié)的內(nèi)容，如果文章中有什么不對的地方還請大家指正。
https://blog.csdn.net/qq_3190...
https://www.cnblogs.com/cheng...
https://www.jianshu.com/p/006...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/117385.html
摘要：標準盒模型與盒模型開發(fā)者們都知道，由于歷史遺留問題與既定標準的發(fā)展，存在著兩個盒模型。即的標準盒模型以及的怪異盒模型。在中，可以用去定義元素的盒模型。比較這兩個盒模型的差異之前，我們先來看一張圖先不討論寬高，我們把一個元素的組成分為。 標準盒模型與IE盒模型 開發(fā)者們都知道，由于歷史遺留問題與既定標準的發(fā)展，存在著兩個css盒模型。即W3C的標準盒模型以及IE的怪異盒模型。在css中，...
摘要：常見問題小結(jié)一行內(nèi)樣式內(nèi)聯(lián)樣式外部樣式行內(nèi)樣式代碼寫在具體網(wǎng)頁中的一個元素內(nèi)比如一般不需要擔心樣式優(yōu)先級與樣式覆蓋在制作頁面的時候需要為很多的標簽設置屬性，所以會導致頁面不夠純凈，文件體積過大不利于，后期維護成本高。 CSS常見問題小結(jié) 一、行內(nèi)樣式、內(nèi)聯(lián)樣式、外部樣式 行內(nèi)樣式：代碼寫在具體網(wǎng)頁中的一個元素內(nèi)；比如： 一般不需要擔心樣式優(yōu)先級與樣式覆蓋 在制作頁面的時...
摘要：提供了糟糕的支持，而雖然接近標準，但依舊未能完全正確的支持標準。盡管修復了許多的問題，但是依然延續(xù)實現(xiàn)中的其它故障主要是盒模型問題。因此大部分的聲明將觸發(fā)嚴格模式即依據(jù)標準的規(guī)則渲染網(wǎng)頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點 主要參考自第一篇文章，然而筆者在讀的時...
閱讀 1159·2021-09-22 15:19
閱讀 1823·2021-08-23 09:46
閱讀 2311·2021-08-09 13:47
閱讀 1480·2019-08-30 15:55
閱讀 1473·2019-08-30 15:55
閱讀 2035·2019-08-30 15:54
閱讀 2852·2019-08-30 15:53
閱讀 765·2019-08-30 11:03
