所有html元素可以看作盒子，在css中，" box model "這一術語是用來設計和布局時使用。
css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括：邊距(margin)，邊框(border)，填充(padding)、實際內容(content)。
盒模型允許我們在 其它元素和周圍元素 邊框之間的空間 放置元素。
下面的說明了盒子模型(box model)：
不同部分的說明：
注意：
當您指定乙個 css 元素的寬度和高度屬性時，你只是設定內容區域的寬度和高度，要知道，完整大小的元素，你還必須新增內邊距，邊框和邊距。
元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距元素的總高度計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距css邊框屬性允許你指定乙個元素邊框的樣式和顏色。
border-style屬性設定乙個元素的四個邊框的樣式，此屬性可以有一到四個值。
例項：
border-style:dotted solid double dashed;
border-style:dotted solid double;
border-style:dotted solid;
border-style:dotted;
既然border有四邊，那麼其自然就可以分開設定，分別為：
注意：其它可以設定4個值的（eg：border、border-color、margin…），都是該規律，後面將不再重複！值對應的效果：(這裡使用淺色更容易看出後面幾個的區別，而且得把邊框調寬)
還有關於border的一點乾貨，見：
重學前端 概括元素和屬性 / 大小寫不敏感 / 詳解標題標籤 [em和px、源css（font-weight）] / 詳解分割線hr標籤 / 初見border / 詳解auto（第二天）
border-width屬性設定乙個元素的四個邊框的寬度。
注意：
經菜鳥測試（goole、firefox）：thin=1px、thick=5px、medium=3px注意：預設為什麼是3px？
詳情見：
重學前端 概括元素和屬性 / 大小寫不敏感 / 詳解標題標籤 [em和px、源css（font-weight）] / 詳解分割線hr標籤 / 初見border / 詳解auto（第二天）
border-color屬性設定乙個元素的四個邊框顏色。
注意：
請始終把 border-style 屬性宣告到 border-color 屬性之前，元素必須在您改變其顏色之前獲得邊框。color取值見：一般border-style、border-width、border-color 前後關係錯誤，也沒什麼問題，但還是按照標準比較好，最先寫border-style，後面兩個隨意！
詳解文字格式（text）[第二天]
注意：
這裡transparent，並不是預設邊框顏色為transparent，預設邊框顏色是黑色！（這裡寫乙個預設，菜鳥也不明白為什麼）縮寫邊框屬性設定在乙個宣告中所有的邊框屬性。可以設定的屬性分別（按順序）：border-width、border-style 和 border-color。transparent是全透明黑色(black)的速記法，即乙個類似rgba(0,0,0,0)這樣的值。
注意：
上述屬性值缺少乙個沒有關係，但千萬不要缺boeder-style，不然就預設為none(沒有邊框)，設定其他的也沒有意義！div css 一 盒子模型
宣告盒子模型時用到的css屬性 height width margin padding border padding 10px 20px 30px 上10px,左右20px，下30px 注意 在盒子模型時，如果有height 和 width時，必須考慮相容性，尤其是在有border 和padding...
Web基礎05 盒子模型01邊框屬性
首先要知道盒子模型用的標籤是 必備的是實體化三屬性 width height background 背景屬性 邊框屬性 邊框樣式 border style border style 上邊 左邊 下邊 右邊 樣式 double 雙實線 dashed 虛線 solid 單實線 dotted 點線 邊框寬...
第四課 盒子模型
組成部分 單詞外邊距 margin 邊框border 內邊距 填充 padding 內容content 盒子分為兩類 預設是內容盒子,此類盒子加填充會隨之變大 div style 常用的是邊框盒子,不會隨加填充而變大,但會壓縮內容.div 盒子的部分屬性演示 或 這裡本身的style中描述的是盒子的...