一、外边距合并
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 |