我理解的css盒模型以及使用場景

icyfire 發布于2019-08-30 15:55 / 1407人閱讀

摘要：在中我們可以通過設置的屬性來完成標準或者怪異模式之間的切換。設為之后，和的厚度可以隨意調，并不會溢出父元素。

- css盒模型是什么
網頁設計中css技術所使用的一種思維模型

- 盒模型的組成

- 盒模型的兩種標準（在不考慮css3的情況下）

兩種模型唯一的差異就在元素寬高度的定義
w3c標準模型的元素寬高＝內容（content）的寬高
IE模型的元素寬高＝內容（content）＋填充（padding）＋邊框（border）的總寬高

在html頭部有一個聲明，瀏覽器會根據這個聲明來判斷文件是什么類型的，也會根據這個聲明來解析文件

當我們寫了doc聲明的時候，無論哪種內核的瀏覽器都會解析為標準模型，元素寬度＝content的寬度，即當我們設置width：100px的時候，這個寬度指的就只是content的寬度
總寬度＝我們設置的width＋padding＋border

當頭部的doc聲明缺失的時候，部分ie內核的瀏覽器則會觸發ie模式即怪異模式（ie6，7，8）width＝content＋padding＋border
總寬度＝width

- 為什么會出現不同模型

當年微軟的IE瀏覽器占據超過80%市場份額的時候，想自己獨立制定一套瀏覽器標準，其中就包括IE的盒模型，但是有很多公司不同意IE的做法，他們遵循的是W3C的標準來定制瀏覽器，也就造成了現在瀏覽器不同的CSS盒模型，但是仍有很多老網站采用的是老IE的標準(怪異模式)，因此很多瀏覽器保留了IE的怪異模式。

- box-sizing
在CSS3中我們可以通過設置 box-sizing的屬性來完成標準或者怪異模式之間的切換。

（1）box-sizing ： content-box 采用標準模式也是默認樣式

（2）box-sizing： border-box 采用ie怪異模式

- content-box的缺點
目前任何瀏覽器默認使用的都是content-box，但是這個內容盒子有一個缺點，舉個栗子
假設我們想要兩個子容器float:left，寬度各50%，然后給一點padding，最后讓子容器并排充滿父容器，代碼如下




  
  Title
  



  left-box
  right-box

我們在瀏覽器中運行之后發現，想象的很美好結果卻并不美好，因為兩個子元素寬度超過了50%，導致了折行，于是寬度就不能設置為50%了，只能將寬度減去padding的值，在這種時候，border-sizing就派上用場了

了解border-sizing
border-sizing是css3新增的聲明，很多開發者可能都不曾用過，既然標準模型誕生的早，又叫標準模型，為什么還要出現border-sizing呢

border-sizing的優點
border-sizing的誕生就是為了解決content-sizing的缺點，border－sizing意味著子容器的padding和border厚度都算在50%內，這樣你就可以隨意修改padding和border的值，而不用擔心父容易被撐爆

border-sizing的兼容性
ie8也支持該屬性，所以不用擔心兼容性問題

border-box的使用場合
目前最流行的css框架幾乎都采用了border－sizing，框架想要具備柵格系統，肯定要用border－sizing
通常情況下你只需要在必須使用border－sizing元素的身上使用這個屬性，其他元素都保持content－sizing就好了

子元素有padding和border，或者至少有其一，并且需要給子元素設定100%寬度（或者50%寬度等等），這時候顯然需要border-box。設為border-box之后，padding和border的厚度可以隨意調，并不會溢出父元素。如果是content-box，那么，寬度必然會溢出，而且，為了不溢出，你設定子元素的寬度就只能是一個定值，或者是一個計算值（比如calc(100%- 20px)）。

由于之前一直對于css盒模型的理解模棱兩可，所以最近趁有時間查了很多相關文章，歸納了以上內容終于搞懂了這個難啃的骨頭，參考的資料有以下幾篇文章，感興趣的可以自己查閱，由于自己也是邊理解邊總結的內容，如果文章中有什么不對的地方還請大家指正。
https://blog.csdn.net/qq_3190...
https://www.cnblogs.com/cheng...
https://www.jianshu.com/p/006...

云服務器 GPU云服務器盒模型盒模型html嗎簡述html盒模型 redis的使用場景

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117385.html

深入理解盒模型與BFC

摘要：標準盒模型與盒模型開發者們都知道，由于歷史遺留問題與既定標準的發展，存在著兩個盒模型。即的標準盒模型以及的怪異盒模型。在中，可以用去定義元素的盒模型。比較這兩個盒模型的差異之前，我們先來看一張圖先不討論寬高，我們把一個元素的組成分為。標準盒模型與IE盒模型開發者們都知道，由于歷史遺留問題與既定標準的發展，存在著兩個css盒模型。即W3C的標準盒模型以及IE的怪異盒模型。在css中，...

gself 2019-08-29 17:14 評論0 收藏0
CSS常見問題小結

摘要：常見問題小結一行內樣式內聯樣式外部樣式行內樣式代碼寫在具體網頁中的一個元素內比如一般不需要擔心樣式優先級與樣式覆蓋在制作頁面的時候需要為很多的標簽設置屬性，所以會導致頁面不夠純凈，文件體積過大不利于，后期維護成本高。 CSS常見問題小結一、行內樣式、內聯樣式、外部樣式行內樣式：代碼寫在具體網頁中的一個元素內；比如：一般不需要擔心樣式優先級與樣式覆蓋在制作頁面的時...

ivyzhang 2019-08-30 10:48 評論0 收藏0
【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

摘要：提供了糟糕的支持，而雖然接近標準，但依舊未能完全正確的支持標準。盡管修復了許多的問題，但是依然延續實現中的其它故障主要是盒模型問題。因此大部分的聲明將觸發嚴格模式即依據標準的規則渲染網頁。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始，一步步涉及一些常見的前端筆試和面試點主要參考自第一篇文章，然而筆者在讀的時...

binta 2019-08-29 16:13 評論0 收藏0
CCS 盒模型分析

摘要：基本概念頁面中的每個元素都可以看成一個盒子，盒子里面可以裝其他盒子，層層嵌套。標簽就是最外面的大盒子。每個盒子由內向外分別是。分類盒模型有兩種，標準盒模型和盒模型。基本概念頁面中的每個元素都可以看成一個盒子，盒子里面可以裝其他盒子，層層嵌套。html 標簽就是最外面的大盒子。每個盒子由內向外分別是 content, padding, border, margin 。 showImg...

Jochen 2019-08-30 15:56 評論0 收藏0