一、外边距：

外边距：指的是当前盒子与其他盒子之间的距离

盒子四个方向的外边距：

margin-top

margin-right

margin-bottom

margin-left

外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动

  margin-right: -100px;

  margin-left: -100px;

  margin-top: -100px;

  margin-bottom: -100px;

margin还可以设置为auto，auto一般只设置给水平方向的margin

如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中

margin:0 auto ;    居中垂直方向外边距如果设置为auto，则外边距默认就是0

外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样

margin:10px 20px 30px 40px;

---

二、外边距的重叠

边距重叠要求：1、垂直 

                         2、两个盒子必须相邻

兄弟重叠：重叠时，边距取最大值

父子重叠解决方案：

          1、插入内边距padding

          2、给div3和4之间插入任意内容

          3、overflow

          4、插入边框border

---

三、浏览器默认样式

清除页面上所有的默认标签

*{

margin:0;

padding:0;

}

---

四、内联元素的盒模型

内联元素：不可设置宽高，设置了也不好使

padding、border、margin：水平方向都好使，垂直方向不好使

---

五、display和visibility

当内联元素设置宽高不好使，如何解决？

可以把内联元素换成块元素 

当display可选值为none时，隐藏元素，不显示元素,不占位置

display: none;与visibility: hidden;之间的区别？

display: none;    ——    隐藏元素，不显示元素,不占位置

visibility: hidden;    ——    隐藏元素，不显示元素，占位置

还有overflow：hidden;也可以隐藏

inline-block：行内块元素（既是内联元素又是块元素），可以使这个元素既设置宽高又不独占一行

inline：内联元素

block：块元素

---

六、overflow

visible： 默认值，内容不会被修剪，会呈现在元素框之外

hidden：内容会被修剪，并且其余内容是不可见的（一剪"没"）

scroll： 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容（不管有没有溢出内容都有滚动条）

auto ：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

inherit ：规定应该从父元素继承 overflow 属性的值