前端基础CSS3只边框属性、边距

边框属性

• 只要是标签，就可以设置边框

• 格式：

  1.border: 边框宽度 边框样式 边框颜色；<!--同时设置4条边-->
  2.border-top: 边框宽度 边框样式 边框颜色；
      border-bottom: 边框宽度 边框样式 边框颜色；
      border-right: 边框宽度 边框样式 边框颜色；
      border-left: 边框宽度 边框样式 边框颜色；
  3.border-width：上 右 下 左<!--省略第下和左则下等于上，左等于右，省略右、下和左则四边同等-->
      border-style：上 右 下 左
      border-color：上 右 下 左

   

• 宽度 / 颜色 ：可以省略

• 样式：dotted(小圆点)，dashed(虚线)，solid(实线)；（不能省略）

边距

• 内边距

  含义：边框与内容之间的距离

  格式

  非连写：
  padding-top:;
  padding-right:;
  padding-bottom:;
  padding-left:;
  连写：
  padding:上 右 下 左；<!--省略规则同边框属性-->

  注意：内边距导致标签占用空间的宽度和高度发生改变

  企业作用：控制嵌套盒子（父子盒子）之间的间距首先考虑padding

• 外边距

  含义：标签与标签之间的距离

  格式

  非连写：
  margin-top:;
  margin-right:;
  margin-bottom:;
  margin-left:;
  连写：
  margin:上 右 下 左；<!--省略规则同边框属性-->

  外边距合并现象：默认布局垂直方向上，会出现外边距合并现象，外边距小的合并到外边距大的外边距中

  盒子嵌套外边距问题：小盒子嵌套在大盒子中，给小盒子加顶部外边距时，大盒子会随小盒子一起被顶下来。解决方法一：给大盒子加边框属性；

  企业作用：控制兄弟盒子之间的距离