css 盒子模型 内外边距

盒子模型

 

 

//盒子模型是由 margin + border + padding + 网页元素（content）

边框颜色

   /* 边框的粗细 */   border-width: 10px;

   /* 边框的颜色 * /   /* border-color:red; 

   /* 边框的类型 solid 实线 */   border-style:solid;

   /* 设置上边框的颜色 */     border-top-color: red; 

   /* 设置右边框的颜色 */   border-right-color:red;

   /* 设置下边框的颜色 */   border-bottom-color:red; 

   /* 设置左边框的颜色 */  border-left-color: red; 

   /* 按照顺时针的顺序 第一个值表示上边框的颜色 第二个值表示右边框的颜色第三个值表示下边框的颜色 第四个值表示左边框的颜色 */  border-color:red green blue yellow;

边框粗细

/* 边框的类型 solid 实线 */ border-style:solid; 

 /* border-width: thick; */ /* 粗的边框 系统会设置为5像素 */

       /* border-width: medium; */ /* medium是中等的粗细 系统会默认设置为3像素 */

            /* border-width: thin; */ /* thin是最细的 系统会默认设置为1像素 */

            /* 设置上边框的粗细 */  border-top-width: 10px; 

            /* 设置右边框的粗细 */ border-right-width: 10px; 

            /* 设置下边框的粗细 */  border-bottom-width: 10px; 

            /* 设置左边框的粗细 */  border-left-width: 10px; 

            /* 设置边框 上下为10px 左右为20px */  border-width: 10px 20px; 

            /* 设置边框的粗细为  上边框10px 左右边框粗细为20px 下边框粗细为30px */  border-width: 10px 20px 50px; 

            /* 顺时针的顺序 设置边框的粗细 上边框为10px 右边框为30px 下边框为50px 左边框为70px */  border-width: 10px 30px 50px 70px; */

边框样式

            /* 边框没有任何样式 也就显示不了 */  border-style:none; 

            /* 隐藏边框的样式 也显示不了 */  border-style:hidden; 

            /* 边框的样式变成点状 */  border-style:dotted; 

            /* 边框的样式变成虚线状 */  border-style:dashed; 

            /* 边框的样式变成实线 */   border-style:solid; 

            /* 边框变成两条实线 */  border-style: double; 

            /* 两个值 表示上下是点状 左右是线状 */   border-style: dotted dashed; 

            /* 上边框为点状 左右为虚线 下边框是双实线 */  border-style: dotted dashed double; 

            /* 顺时针 按照上右下左的顺序 上边框是实线 右边框是点状 下边框是虚线 左边框是双实线  */ border-style: solid dotted dashed double; 

            /* 单独设置上边框的样式为点状 */  border-top-style:dotted; 

            /* 单独设置右边框的样式为虚线 */  border-right-style: dashed;

            /* 单独设置下边框的样式为双实线 */  border-bottom-style: double; 

            /* 单独设置左边框的样式为实线 */  border-left-style:solid; 

外边距

  /* margin只设置一个值 上右下左都会设置10px的外边距 */  margin:10px; 

  /* margin设置两个值 是上下外边距都是10px 左右外边距都是50px */   margin:10px 50px; 

  /* 设置三个值表示 上边距是10px 左右是30px 下边距是20px  */   margin:10px 30px 20px; 

  /* 单独设置上边距 */  margin-top:20px; 

  /* 设置下边距 */  margin-bottom: 20px; 

  /* 设置右边距 */  margin-right: 20px; 

   /* 单独设置左边距 */ margin-left:20px