关于 CSS 一些细节问题 - 黑马程序员技术交流社区

还要注意的是，父元素与其子元素之间也会发生折叠：

2个或多个块级相邻元素的外边距（margin）的折叠规则：

外边距都为正值时，取最大值
不全是正值时，则用正值减去（所有值的绝对值中）最大值
全为负值时，则取最小值

不发生折叠情况：

水平（左右）外边距不会折叠
浮动元素的外边距不会折叠，并且浮动元素与它的子元素之间也不会发生折叠
设置了overflow且值不为visible的块级元素与它的子元素之间的外边距也不会被折叠
绝对定位（position:absolute;）元素的margin不与任何margin发生折叠，并且与它的子元素之间的margin也不会发生折叠

解决折叠的方法：

外层元素用padding替代margin
外层元素设置overflow:hidden
内层元素加padding:1或者border
内层元素加浮动（float）或设为（display:inline-block）
内层元素使用绝对定位（position:absolute;）

3、position的absolute和relative定位top、left、right、bottom问题

绝对定位（position:absolute）的top、left、right、bottom是相对于其具有相对定位属性（position不为static）的父元素（不一定是其直接父元素，有可能是祖先元素）。

如果两者（top、bottom）同时存在时，只有top起作用；如果两者（left、right）同时存在时，只有left起作用。

相对定位（position:relative）元素会保留原来占有的位置，其后面的元素按原来文档流仍然保持原来的位置

top的值表示对象相对原位置向下偏移的距离

bottom的值表示对象相对原位置向上偏移的距离

left的值表示对象相对原位置向右偏移的距离

right的值表示对象相对原位置向左偏移的距离

如果两者（top、bottom）同时存在时，只有top起作用；如果两者（left、right）同时存在时，只有left起作用。

看一个例子：

[JavaScript] 纯文本查看 复制代码

<style>

.prev{   

  width:100px;    

  height:100px;   

  position:relative;   

  background:blue;   

  top:20px;   

}   

.next{   

  width:100px;   

  height:100px;   

  background:red;   

}   

.fl{   

  float:left;   

  margin:20px;   

}

</style>



<div class="fl">   

  <div class="prev" style="position:static"></div>   

  <div class="next"></div>   

</div>   

<div class="fl">   

  <div class="prev"></div>   

  <div class="next"></div>   

</div>

从上面的代码和效果图，你可以看出，设置了position:relative的元素设置了top:20px，虽然（相对其原位置）向下移动了20px，可是并不会影响其后面的元素。

4、覆盖样式问题

比如我们有一个公共文件，其下有一个公共样式：

[JavaScript] 纯文本查看 复制代码

.box {

  color: red;

}

有些时候，我们需要覆盖这个样式，比如将红色改为绿色。由于是公共元素，我们不能直接修改，但方法还是有多种：

[JavaScript] 纯文本查看 复制代码

/*第一种*/

.parent .box {

  color: green;

}

/*第二种*/

.box {

  color: green !important;

}

上面这些是我们常用的，但还有一个小技巧，是我们平常不太注意的，可以如下设置：

[JavaScript] 纯文本查看 复制代码

.box.box {

  color: green;

}

今天就介绍这么多，如有错误，欢迎指正！