外边距及盒子水平分布

margin

设置元素与元素之间的距离

垂直方向

块元素

兄弟：两个都是正值：谁大听谁的

一正一负：两者相加

两个负数：看绝对值大的

父子：出现的问题：外边距重叠（父子元素的外边距开始位置重合在一起）

解决思路：让父子外边距开始位置不同

解决方法：

①给父元素设置边框

出现的问题：会撑开父元素，要设置box-sizing:border-box

子元素的margin-top设置的距离是上边框离父元素上底边的距离

②给父元素设置内边距

出现的问题： 会撑开父元素，要设置box-sizing:border-box

③给父元素开启bfc（块级格式化环境）

④在html中添加一个table，不推荐因为会影响html结构

⑤给父元素设置伪元素（::before）

行元素

在垂直方向可以设置外边距但无效果

行内块

两个正值：相加

水平方向

行元素和行内块元素：两个都是正值/一正一负：相加

盒子水平分布

①width+padding+border+margin<父元素的width

当小于父元素的width时，多余部分由margin-right吸收

②当width不设置或者设置为auto时，多余部分由宽度吸收

当margin-left=auto，多余部分由margin-left吸收

当margin-right=auto，多余部分由margin-right吸收

总结：当设置了auto就将多余部分分给它

③有两个值设置auto

width和margin-left/right设置auto，多余部分有width吸收，margin-left/right没有值

margin-left和margin-right设置auto，多余部分平分给左右外边距（块元素居中）

④设置三个auto

width与margin同时设置auto，多余部分由宽度吸收

垂直方向、

设置多少就是多少