一、引入
在**中的製作過程中，會把整個頁面劃分結構，讓開發具有層次性，在後期也方便更新和維護。
劃分的結構會形成乙個乙個的板塊，這樣劃分出來的一塊一塊的板塊我們簡稱為盒子。把劃分出來的整個**盒子結構也就叫做盒模型。
在了解盒模型的基礎上，可以更好的去排版網頁結構，方便編寫**的介面。
二、盒子的布局介紹
把整個網頁的主體結構（html）可以看做乙個大的盒子（也稱之為容器），每個容器都由元素內容 + 內邊距 （padding） +邊框 （border） +外邊距（margin）組成為乙個整體。
注：一般情況下 瀏覽器預設的margin值是8px
盒模型屬性的介紹
1.padding內邊距
2.margin外邊距
3.border邊框
第乙個內邊距 padding（也叫做內填充）。內填充，顧名思義這個元素屬性是長在盒子內部的乙個屬性，長在盒子內部的屬性同時它也是會佔據盒子空間的乙個屬性。
例如：
我們給div 寬度和高度都是100px 由於新增了padding50px 則會佔據盒子的空間使盒子撐大到200px padding乙個屬性值得時候是會在盒子內部四周都新增50px的範圍。
padding的屬性值用法：
padding:乙個值 四周都padding
padding:兩個值 上下 左右
padding:三個值 上 左右 下
padding:四個值 上右下左
注：padding的值不可以為負數
第二個 margin外邊距同樣顧名思義 它是長在盒子外面的乙個屬性，它和內邊距不同的是它長在盒子外面，所以不會佔據盒子裡面的內容。一般來控制兩個盒子之間的距離。
如下所示：
執行結果如下顯示：
由於沒有邊框border 沒有內邊距 box1在四周都新增了100px的外邊距
外邊距的屬性值用法：
margin:乙個值 四周
margin:兩個值 上下 左右
margin:三個值 上 左右 下
margin:四個值 上右下左
注：margin的值可以為負數
第三個邊框 border邊框是元素內容的保護殼一樣 是在元素內容的外側
如圖所示：
執行結果如下：
在盒子的四周形成了20px的邊框。
border的三個屬性值分別代表什麼意思。
第乙個值代表邊框的大小多少畫素。
第二個值代表的是邊框的型別。邊框有多種型別
solid 實線
dashed 虛線
dotted 點狀線
double 雙線
none 沒有線條
第三個值代表邊框顏色 這裡是一種常用的復合寫法
border: 20px solid #000;
屬性拆分：
border-width: 邊框大小
border-color: 邊框顏色
border-style: 邊框型別
單獨乙個方向設定邊框：
border-left:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-top:10px solid red;
border-width/color/style :
屬性值：
1個值： 四周都新增邊框
2個值： 上下 左右
3個值： 上 左右 下
4個值： 上 右 下 左
html 彈性盒模型
父元素 display flex,flex direction,justify content,align items,align content 要使用彈性盒模型需要設定display flex 設定了flex direction的乙個方向為主軸則另乙個方向就為側軸，這個需要分清 1 flex d...
了解HTML 盒模型
html在布局上,有乙個非常重要的模型,那就是盒子模型,在盒子模型中把標籤內容理解為乙個物品,而css樣式理解為包容著這個物品的盒子,一般的塊級標籤都具有盒子模型的特徵,你可以在css中對這個盒子進行設定,以達到自己布局的目的,我這裡繪製了個簡圖,只寫了內填充和外邊距,因為我感覺其他的屬性更好用文字...
盒模型基礎
盒模型屬性 盒模型有五個屬性分別為 1 width 內容寬度 2 height 內容高度 3 border 邊框 4 padding 內邊距 即邊框到內容之間的距離 5 margin 外邊距 即乙個盒子到另乙個盒子之間的距離 一 width與height 指盒子的寬和高 盒子的體積或者容積，顯示內容...