關(guān)于CSS一些細(xì)節(jié)問(wèn)題

• background-position取值為百分比的計(jì)算方式
• margin相鄰折疊問(wèn)題
• position的absolute和relative定位top、left、right、bottom問(wèn)題
• 覆蓋樣式問(wèn)題

.box {   
  width:400px;   
  height:400px;   
  background-color:black;   
  background-image:url(mm.jpg);   /* 圖片原尺寸150 * 225 */
  background-repeat:no-repeat;   
  background-position:50% 50%;  
}

水平位置： (400 - 150) * 50% = 125px
垂直位置： (400 - 225) * 50% = 87.5px

• 外邊距都為正值時(shí)，取最大值
• 不全是正值時(shí)，則用正值減去（所有值的絕對(duì)值中）最大值
• 全為負(fù)值時(shí)，則取最小值

• 水平（左右）外邊距不會(huì)折疊
• 浮動(dòng)元素的外邊距不會(huì)折疊，并且浮動(dòng)元素與它的子元素之間也不會(huì)發(fā)生折疊
• 設(shè)置了overflow且值不為visible的塊級(jí)元素與它的子元素之間的外邊距也不會(huì)被折疊
• 絕對(duì)定位（position:absolute;）元素的margin不與任何margin發(fā)生折疊，并且與它的子元素之間的margin也不會(huì)發(fā)生折疊

• 外層元素用padding替代margin
• 外層元素設(shè)置overflow:hidden
• 內(nèi)層元素加padding:1或者border
• 內(nèi)層元素加浮動(dòng)（float）或設(shè)為（display:inline-block）
• 內(nèi)層元素使用絕對(duì)定位（position:absolute;）

• top的值表示對(duì)象相對(duì)原位置向下偏移的距離
  
• bottom的值表示對(duì)象相對(duì)原位置向上偏移的距離
• left的值表示對(duì)象相對(duì)原位置向右偏移的距離
  
• right的值表示對(duì)象相對(duì)原位置向左偏移的距離
  

<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>

.box {
  color: red;
}

/*第一種*/
.parent .box {
  color: green;
}
/*第二種*/
.box {
  color: green !important;
}

.box.box {
  color: green;
}