關於CSS一些細節問題

本文是2016年的最後一篇文章，主要是將一些CSS細節問題整理一下。

• background-position取值爲百分比的計算方式

• margin相鄰摺疊問題

• position的absolute和relative定位top、left、right、bottom問題

• 覆蓋樣式問題

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

二、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;）

三、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，但是並不會影響其後面的元素。

四、覆蓋樣式問題

好比咱們有一個公共文件，其下有一個公共樣式：

.box {
  color: red;
}

有些時候，咱們須要覆蓋這個樣式，好比將紅色改成綠色。因爲是公共元素，咱們不能直接修改，但方法仍是有多種：

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

上面這些是咱們經常使用的，但還有一個小技巧，是咱們日常不太注意的，能夠以下設置：

.box.box {
  color: green;
}

今天就介紹這麼多，若有錯誤，歡迎指正！

原文連接：關於CSS一些細節問題