（五）前端基础之盒子模型中的问题

一.垂直外边距的重叠（兄弟元素）

在网页中垂直方向的相邻外边距会发生外边距的重叠（兄弟元素）取最大值而不是两个之和 ，

父盒子的高度是217=100+100+15+2

解决垂直外边距重叠：

1）中间添加一个字母如a让其不相邻外边距就会使两个外边距之和

240=100+100+15+5+18（a的宽度）+2

二，垂直外边距（父子元素）

如果父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素

父子盒子都会向下移15px

解决方法

1）给父元素设置border:1px solid red

2)  给父元素设置padding-top:1px （父盒子的高度会增大）

浏览器为在页面中没有样式时，也可以有一个比较好的显示效果，为很多元素设置了一些默认的margin和padding这些样式在默认情况下我们是不需要的，所以需要清除默认样式。

三，内联元素的特点

1）内联元素不能设置width 和height可设置水平方向的内边距，padding-left：10px；padding-right:10px行内元素中的内容会水平居中显示，

2）行内元素可设置垂直方向内边距，但不会影响页面布局（会把下面的内容遮住）

3）支持水平方向margin(left,right)两个内联元素一个Left一个right外边距不会重叠，不支持垂直方向外边距

四,元素隐藏和显示

display:none 元素不会在网页中显示也不会占据位置

visibility:hidden/visible 元素隐藏后仍会占据位置

五，overflow使用

子元素默认是存在父元素内容区中，理论上子元素最大可等于父元素内容区域大小，如果子元素的大小超过了父元素的内容区域，则超过的部分会在父元素以外的位置显示（溢出）

overflow可设置父元素如何处理溢出的内容：

visible:默认值，不对溢出内容做处理，子元素会在父元素以外的位置显示

hidden:溢出内容会被修剪，不显示

scroll：为父元素加滚动条，该属性不管内容是否溢出，都会添加水和垂直双方向的滚动条

auto：根据需求自动添加滚动条，需要水平就添加水平

六，元素在文档流中的特点

文档流：网页是多层的，我们能看到的是顶层。文档流处在网页的最底层，表示的是一个页面中位置（如：地基）

   所创建的元素都处在文档流中

块元素在文档流中的特点：

1）块元素在文档流中独占一行，

2）块元素在文档流中默认宽度是父元素的100%

3）块元素在文档流中的高度默认被内容撑开

内联元素在文档流中的特点：

1）内联元素在文档流中只占自身的大小

2）在文档流中内联元素的宽高默认都被内容撑开

当元素的宽或高的值为auto时，此时指定内边距不会影响可见框的大小，而是自动修改宽、高以适应

给块元素设置浮动后

float浮动元素，使元素脱离文档流，

display:inline-block 给每个元素设置块元素可让它们水平排布，但这些块元素的代码若是换行了，则每个块元素之间都会有一个小空隙，（代码写一行就没有事）

如元素脱离文档流后，它后面的元素会立即上浮直到遇到父元素的边框

七，元素脱离文档流后带来的问题

当元素脱离文档流后，高度和宽度都是被内容撑开，（内联元素脱离文档流后可设置宽，高=>块元素）

脱离文档流后带来的问题：高度塌陷