什麼是盒子
所謂盒子，其空間一定是用來裝載內容的，
我這裡想把盒子比作乙個快遞包裹：
對於快遞我們一定不陌生，快遞裡面放的是我們買的東西，但是不管你買了多少東西，快遞都會用
乙個盒子包裝著，既然用盒子包裝著，就難免裡面的空間會有一些沒有被利用。
快遞只用乙個盒子包裝著肯定不行，路上磕磕碰碰的，所以一定要有一層包裝。這樣才是乙個完美的快遞，所以盒子模型應運而生：
這裡呢，context就是我們買的東西，padding就是我們盒子裡一些沒有用到的一些空間
至於border就是我們快遞包裝的盒子，margin就很容易了，就是我們盒子外面的包裝。
當然，快遞快遞的肯定不好聽而且也不知道他們的具體作用：
margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
border(邊框) - 圍繞在內邊距和內容外的邊框。
padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
content(內容) - 盒子的內容，顯示文字和影象。（我個人覺得難懂）
先來乙個盒子的例子：
div
首先，這個貨物是乙個寬為300px的小東西，所以他自己就佔了300px，
再看，盒子裡沒用到空間是（padding）25px，盒子模型有乙個習慣，就是把貨物放在中間，所有貨物左右都有乙個25px，
再看包裝的盒子（border）有25px寬，所以，乙個裸盒子現在就有400px寬了（還要算左右），
再看外面的包裝紙（margin）有25px寬：完美，這個盒子寬450px。
總結一下就是：
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
好了，總體的看完了，我們把盒子開啟，看每個組成的各個屬性：
先拿border開?：
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盒...