在網頁布局中，一定離不開盒子模型這個東西。今天就來說一下這個概念。
所謂盒子模型（box model）就是把 html 頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。或者說，每乙個可見的 html 元素都是乙個盒子。
每個矩形都由元素的內容(content)、內邊距（padding）、邊框（border）和外邊距（margin）組成。
每個盒子的大小是由內容(content)、內邊距（padding）、邊框（border）這三個部分的實際大小來決定的，外邊距不算在寬度裡面。
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
這裡我們可以看到 box2 的寬度受到 內邊距（padding）、邊框（border）的影響，他的寬度成為了 240px
盒子模型的特性
每個盒子都有：邊界、邊框、填充、內容 4個屬性每個屬性都包括4個部分：上、下、左、右。屬性的四個部分可以同時設定，也可以分別設定
margin(外邊距)清除邊框外的區域，外邊距是透明的。border(邊框)圍繞在內邊距和內容外的邊框。padding(內邊距)清除內容周圍的區域，內邊距是透明的。content(內容)盒子的內容，顯示文字和影象。border 屬性來定義盒子的邊框，該屬性包含3個子屬性：border-style 邊框樣式屬性指定要顯示什麼樣的邊界
dotted 點線
solid實線
注意！！：當定義邊框寬度時，必須要定義邊框的顯示樣式，由於預設樣式為none,所以僅設定邊框的寬度，由於樣式不存在，邊框寬度也自動被清除為 0。
通過 border-width 屬性為邊框指定寬度。
為邊框指定寬度有兩種方法：
直接在屬性後面指定寬度值border-width關鍵字（不常用，幾乎不用）不同瀏覽器對此解析的寬度值不同，不會用到。如果想為單獨某條邊設定寬度的話使用：border-width也可以簡寫：border-top-width案例border-widthborder-color屬性用於設定邊框的顏色。可以設定的顏色<定義邊框顏色可以使用顏色名、rgb 顏色值或十六進製制顏色值。
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盒...