盒子模型分為兩種——塊級盒子模型（block box）和 內聯盒子模型（inlinebox）
為什麼要這麼區分呢，是因為這兩種盒子模型會在頁面流和元素之間的關係上表現出不同的行為
塊級盒子模型（block box）
乙個被定義成塊級的（block）盒子會表現出以下行為:
盒子會在內聯的方向上擴充套件並佔據父容器在該方向上的所有可用空間，在絕大數情況下意味著盒子會和父容器一樣寬
每個盒子都會換行
width 和 height 屬性可以發揮作用
內邊距（padding）, 外邊距（margin） 和 邊框（border） 會將其他元素從當前盒子周圍「推開」
除非特殊指定，諸如標題和段落預設情況下都是塊級的盒子。
內聯盒子模型（inlinebox）
如果乙個盒子對外顯示為 inline，那麼他會有以下行為
盒子不會產生換行。
width 和 height 屬性將不起作用。
垂直方向的內邊距、外邊距以及邊框會被應用但是不會把其他處於 inline 狀態的盒子推開。
水平方向的內邊距、外邊距以及邊框會被應用而且也會把其他處於 inline 狀態的盒子推開。
用做鏈結的元素、 、 以及都是預設處於 inline 狀態的。
我們弄清了兩種不同的盒子模型之間的區別，那麼盒子模型究竟是什麼呢？
什麼是盒子模型？
完整的 css 盒模型應用於塊級盒子，內聯盒子只使用盒模型中定義的部分內容。模型定義了盒的每個部分 —— margin, border, padding, and content —— 合在一起就可以建立我們在頁面上看到的內容。
乙個塊級盒子模型由以下幾部分組成
content box: 這個區域是用來顯示內容，大小可以通過設定 width 和 height.
padding box: 包圍在內容區域外部的空白區域； 大小通過 padding 相關屬性設定。
border box: 邊框盒包裹內容和內邊距。大小通過 border 相關屬性設定。
margin box: 這是最外面的區域，是盒子和其他元素之間的空白區域。大小通過 margin 相關屬性設定。
外邊距
外邊距是盒子周圍一圈看不到的空間。它會把其他元素從盒子旁邊推開。
我們可以通過margin屬性來控制元素的所有邊距
例如：
.box
class
="container"
>
class
="box"
>
改變我的外邊距.div
邊框 邊框是在邊距和填充框之間繪製的，為邊框設定樣式時，有大量的屬性可以使用——有四個邊框，每個邊框都有樣式、寬度和顏色。
分別設定每邊的寬度、顏色和樣式，可以使用：
設定所有邊的顏色、樣式或寬度，請使用以下屬性：
設定單邊的顏色、樣式或寬度，可以使用：
例如：.container
.box
class
="container"
>
class
="box"
>
改變我的邊框.div
內邊距
內邊距位於邊框和內容區域之間，應用於元素的任何背景都將顯示在內邊距後面，內邊距通常用於將內容推離邊框。
我們可以使用padding屬性控制元素所有邊
例如.box
class
="box"
>
改變我的內邊距.
關於盒子模型的總結就是這些了，歡迎小夥伴來斧正
css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css 盒子模型 ie盒子模型
css盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。標準w3c盒...