HTML5+CSS——12垂直外边距重叠、内联盒模型、display & visibility、overflow、文档流

一.垂直外边距的重叠

在网页中垂直方向的相邻的！！外边距会发生外边距的重叠，所谓的外边距重叠指兄弟之间的相邻外边距会取最大值！！而不是取和。

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

例如，如果两个重叠的box，可以再父元素的box上加一个顶部内边距，让两个box不相邻，但要注意调整父元素的大小，因为增加内边距会影响盒子大小。（当然这不是最好的方式，以后还会有更好的方法。）

通过改变顶部内边距，把小box往下移动

二.浏览器默认样式

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

所以我们往往在编写样式之前，需要将浏览器中默认的样式margin和padding统统去掉。

清楚浏览器的默认样式，

*{ margin：0； padding：0；}

三.内联元素的盒模型 

内联元素不能设置width和height

设置水平内边距，内联元素可以设置水平方向的内边距

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

为元素设置边框，内联元素可以设置边框，但是垂直的边框不会影响到页面的布局

水平外边距，内联元素支持水平方向的外边距，水平方向的相邻外边距不会重叠，而是求和。

垂直外边距，内联元素不支持垂直外边距

四.display 和 visibility

1）前面说到，内联元素不支持设置width和height。但我们可以将一个内联元素变成块元素，通过display样式可以修改元素的类型。

display可选值：

inline：可以将一个元素作为内联元素显示

block：可以将一个元素设置块元素显示

inline-block：将一个元素转换为行内块元素，即可以使一个元素既有行内元素的特点又有块元素的特点。既可以设置宽高，又不会独占一行。

none：不显示元素，并且元素不会在页面中继续占有位置

2）visibility可以用来设置元素的隐藏和显示的状态

visibility可选值：

visible ： 默认值，元素默认会在页面显示

hidden ：元素会隐藏不显示

display：none； 和 visibility：hidden； 的区别

none不会显示元素，并且元素不会在继续占原位置，而visibility隐藏的元素虽然不会在页面中显示，但是她的位置会依然保持。

五.overflow

子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区大小，如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容。

父元素默认将溢出内容，在父元素外边显示。

通过overflow可以设置父元素如何处理溢出内容

overflow的可见值

overflow:auto;

六.文档流

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中。

元素在文档流中的特点，

首先是块元素

1.块元素会在文档流中独占一行，块元素会自上向下排列

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

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

其次是内联元素

1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行不足以容纳所有的内联元素，则换到下一行，继续自左向右。

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