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; 

}