本文是2016年的最後一篇文章，主要是將一些CSS細節問題整理一下。
- background-position取值為百分比的計算方式
- margin相鄰摺疊問題
- position的absolute和relative定位top、left、right、bottom問題
- 覆蓋樣式問題
1、background-position取值為百分比的計算方式
background-position屬性相信你用的不少，可是當取值為百分比時，你是否認為它是相對於背景圖片的尺寸來計算（我之前也是這種想法，但看了大漠老師的《你真的瞭解background-position》後，才知大錯特錯）
來看看下面的程式碼：
.box {
width:400px;
height:400px;
background-color:black;
background-image:url(mm.jpg); /* 圖片原尺寸150 * 225 */
background-repeat:no-repeat;
background-position:50% 50%;
}複製程式碼相信background-position: 50% 50%你用的不少，這是讓背景圖片居中，相當於center center。
效果如下：
如果50%是按照圖片的尺寸（150 225）來計算的，那麼其值轉換為畫素值應該是75px 112.5px，你覺得背景圖片能在400 400的塊里居中嗎？答案很明顯，是否定的，那是如何計算的呢？
其實官方說法是這樣的：
當背景圖片尺寸（background-size）不做任何的重置（也就是100% 100%）時，水平百分比的值等於容器寬度百分比值減去背景圖片寬度百分比值。垂直百分比的值等於容器高度百分比值減去背景圖片高度百分比值。
水平位置： (400 - 150) * 50% = 125px
垂直位置： (400 - 225) * 50% = 87.5px複製程式碼2、margin相鄰摺疊問題
在開發中，我們偶爾會遇到明明兩個div都設定了margin，可是它們之間的距離就是不等於兩個div的margin之間的和，這是為什麼呢？其實是因為在某些情況下，兩個或多個塊元素的相鄰邊界（其間沒有任何非空內容、padding、邊框）會發生合併成單一邊界，也就是標題說的摺疊。
先來看看兄弟塊級元素的摺疊，如下圖所示：
還要注意的是，父元素與其子元素之間也會發生摺疊：
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起作用。
看一個例子：
<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、覆蓋樣式問題
比如我們有一個公共檔案，其下有一個公共樣式：
.box {
color: red;
}複製程式碼有些時候，我們需要覆蓋這個樣式，比如將紅色改為綠色。由於是公共元素，我們不能直接修改，但方法還是有多種：
/*第一種*/
.parent .box {
color: green;
}
/*第二種*/
.box {
color: green !important;
}複製程式碼上面這些是我們常用的，但還有一個小技巧，是我們平常不太注意的，可以如下設定：
.box.box {
color: green;
}複製程式碼今天就介紹這麼多，如有錯誤，歡迎指正！
原文連結：關於CSS一些細節問題