外边距的折叠，行内元素的盒模型

1.外边距的折叠

• 父元素：

父子元素间相邻外边距，子元素的会传递给父元素（只限于上外边距）， 父子外边距的折叠会影响到页面的布局，必须要进行处理。例如：设置子元素的位置margin-top:100px;结果同时父子元素同时向下移动100px

• 兄弟元素:

兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）。例如: 元素1(在下)margin-top:100px; 元素2：margin-bottom:120px;,则最终元素1向下移动120px
如果相邻的外边距一正一负，则取两者的和。
如果相邻的外边距都是负值，则取两者中绝对值较大的

2、行内元素的盒模型

行内元素不支持设置宽度和高度
行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
行内元素可以设置border，垂直方向的border不会影响页面的布局
行内元素可以设置margin，垂直方向的margin不会影响布局

• display 用来设置元素显示的类型

display可选值：

inline 将元素设置为行内元素

block 将元素设置为块元素

inline-block 将元素设置为行内块元素,既可以设置宽度和高度又不会独占一行

table 将元素设置为一个表格

none 元素不在页面中显示

• visibility 用来设置元素的显示状态

visibility可选值：

visible 默认值，元素在页面中正常显示

hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置