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

一、外边距的折叠

        垂直外边距的重叠（折叠）

             相邻的垂直方向外边距会发生重叠现象

             1、兄弟元素

               兄弟元素间的相邻垂直外边距会取两者之间的较大者（两者都是正值）              

               特殊情况： 

                ① 如果相邻的外边距一正一负，则取两者的和

                ② 如果相邻的外边距都是负值，则取两者中绝对值较大的

               兄弟元素之间外边距的重叠，对于开发是有利的，所以我们不需要处理

              2、父子元素

               父子元素间相邻外边距，子元素会传递给父元素（上外边距）

               父子外边距的折叠会影响到页面的布局，必须要进行处理

二、行内元素的盒模型

        行内元素不支持设置宽度和高度

                 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局

                 行内元素可以设置border，但是垂直方向border不会影响页面的布局

                 行内元素可以设置margin，但是垂直方向margin不会影响页面的布局

         display 用来设置元素显示的类

                 可选值：

                  inline 将元素设置为行内元素

                  block 将元素设置为块元素

                  inline-block 将元素设置为行内块元素

                      行内块元素的特点：既可以设置宽度和高度又不会独占一行

                   table 将元素设置为一个表格

                   none 元素不在页面中显示

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

                 可选值：

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

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