html 盒子模型

網頁的布局本質就是把網頁上的元素，如圖檔，文字，都放入盒子裡面，然後按照自己的需要擺放盒子的過程就是網頁布局

1.盒子模型的組成

   1.width(内容寬度)+padding（内邊距） +border（邊框）+margin（外邊距）

2.邊框

  邊框有三部分組成:

   border: 邊框大小 邊框樣式（ solid 實線 dashed 虛線 dotted 點線 double 雙實線 ） 邊框顔色;

   直接這麼寫邊框控制的是上下左右四條邊框，如果想要單獨某一條邊框的寫法

   border-方位名詞:邊框大小 邊框樣式 邊框顔色;

  邊框是一個複合屬性，每一個部分都可以有單獨的屬性去控制 用的較少

  邊框大小；border-width

  邊框樣式：border-style

  框顔色：border-color

細線表格 border-collapse:collapse;

圓角：borde-radius:值; 一個值控制的上左 上右 下右 下左;

3.内邊距

   一個值：控制整個上下左右

  兩個值：第一個控制上下 第二個控制左右

  三個值：第一個控制的上 第二個控制的左右 第三個控制的下

  四個值：上右下左

  也可以單獨寫

  padding-top

  padding-bottom

  padding-left

  padding-right

4.外邊距

margin的取值方式和padding一樣 

margin的大小隻會移動盒子的位置，并不會對盒子的大小造成影響（特殊情況例外）

行内元素也不要給上下的margin

特殊值：auto  margin:0 auto; 可以讓一個塊級元素水準居中

前提條件：必須是塊級元素 同時必須有固定的width

注意：text-align和margin:0 auto的不同 前者是控制盒子内部的文字或者内部的行内塊  後者控制的是盒子本身

 清楚内外邊距

 * { 

    padding: 0;

    margin: 0; 

}