前端学习个人心得，总结（个人向）

一、外边距合并

1.出现的条件

只有垂直方向的外边距会出现合并，水平方向上不会出现外边距合并。
垂直方向上相邻的元素才会有外边距合并的问题。

2.有两种情况

2.1兄弟元素间的外边距合并

（1）若两者都是正值，取值为两者间最大值
（2）若两个外边距一正一负，取值为两者之和
（3）若两个外边距都是负值，取值为绝对值较大的外边距

解决方案：一般不需要处理，这一般是对开发有利的，如果要处理，可以将本应该设置给两个元素的外边距直接设置给其中一个元素。

2.2父子元素间的外边距合并

解决方案：

（1）给原本设置给子元素的margin值，修改为设置父元素的padding，并相应减少父元素的height。

（2）给父元素添加边框属性。给父元素添加边框属性。在父元素中用height减去边框高度，在子元素中用margin-top减去边框高度（由于增加了边框的厚度，所以导致盒子高度增大，这一步是为了保证父元素盒子的可见区域高度不变）。

（3）给父元素或子元素设置浮动属性。

（4）给父元素或子元素设置position：absolute属性。

（5）给父元素设置overflow：hidden。

（6）给父元素或子元素设置display：inline-block。

二.CSS visibility 属性

visibility属性指定一个元素是否是可见的。

即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

默认值：	visible
继承：	yes
版本：	CSS2
JavaScript 语法：	object.style.visibility="hidden"

三.CSS opacity 属性

opacity 属性设置元素的不透明级别。

默认值：	1
继承性：	no
版本：	CSS3
JavaScript 语法：	object.style.opacity=0.5