margin

• 边框也算盒子本身的大小
• 只有一个参数时 给上下左右 同时设置外边距
• 有两个参数时 :
  第一个参数设置上下外边距
  第二个参数设置左右外边距
• 有三个参数时 :
  第一个参数设置上外边距
  第二个参数设置左右外边距
  第三个参数设置下边距外边距
• 有四个参数时 :
  上右下左

两个相邻元素之间的间距计算:

• 上下外边距 按最大的间距计算
• 左右外边距 按两个外间距之和计算

• 使用 margin 设置居中
  margin:0 auto
• margin 外边距:
  盒子离其他元素的距离
  如果元素是其父元素的第一个元素
  如果给这个元素设置外边距
  则会将其父元素一起拖下来
  (效果相当于 直接给父元素设置外边距)

解决方式:

1. 给父元素加边框
2. 在上面加一个有高度的元素
3. 删掉子元素的上边距 给父元素加上 上内边距

• 行元素不能设置上下外边距

padding

• padding: 50px;
  上下左右同时设置;
• padding: 10px 20px;
  上下和左右
• padding: 10px 20px 30px;
  上和左右和下
• padding: 10px 20px 30px 40px;
  上左下右

• 当子元素需要和父元素边框保持必定间距时第一思考设置 padding

一个盒子的总大小组成 :

• 总大小 = 边框*2+ padding2+width(或height)*
• padding = (总大小 – width(或height))/2-border
• border = (总大小 – width(或height))/2-padding

border

1. 设置宽度
   border-width: 50px;
2. 设置颜色
   border-color: white;
3. 设置边框样式
   3.1 实线
   border-style: solid;
   3.2 虚线
   border-style: dashed;
   3.3 点状线
   border-style: dotted;
   3.4 双实线
   border-style: double;
   3.5 框角曲化
   border-radius:100%
   圆角视觉效果,变成圆形,盒子本质上还是方形的,里面的内容区域排列,依旧遵循方形盒子的排列规则圆角只能将,视觉变圆

background

1. 设置颜色
   background-color: rgb(73, 206, 251);
2. 加图片
   background: url(../img/mouse.jpg);
   去掉重复:
   background-repeat: no-repeat;
   background: url(../img/cao.jpg) no-repeat;
3. 设置位置
   background-position: 20px 25px;
   第一个参数 background-position-x;
   第二个参数 background-position-y
4. 设置大小
   background-position: -127px -342px;
   第一个参数 设置宽
   第二个参数 设置高
   当只有一个参数时 同时设置 宽和高
5. 设置行高
   line-height:100px ;
   padding-left: 370px;