關于CSS一些細節(jié)問題

2018-06-19 18:44 更新
      本文是2016年的最后一篇文章,主要是將一些CSS細節(jié)問題整理一下。

  • background-position取值為百分比的計算方式
  • margin相鄰折疊問題
  • positionabsoluterelative定位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相鄰折疊問題

在開發(fā)中,我們偶爾會遇到明明兩個div都設置了margin,可是它們之間的距離就是不等于兩個div的margin之間的和,這是為什么呢?其實是因為在某些情況下,兩個或多個塊元素的相鄰邊界(其間沒有任何非空內容、padding、邊框)會發(fā)生合并成單一邊界,也就是標題說的折疊。

先來看看兄弟塊級元素的折疊,如下圖所示:


還要注意的是,父元素與其子元素之間也會發(fā)生折疊:


2個或多個塊級相鄰元素的外邊距(margin)的折疊規(guī)則:
  • 外邊距都為正值時,取最大值
  • 不全是正值時,則用正值減去(所有值的絕對值中)最大值
  • 全為負值時,則取最小值

不發(fā)生折疊情況:
  • 水平(左右)外邊距不會折疊
  • 浮動元素的外邊距不會折疊,并且浮動元素與它的子元素之間也不會發(fā)生折疊
  • 設置了overflow且值不為visible的塊級元素與它的子元素之間的外邊距也不會被折疊
  • 絕對定位(position:absolute;)元素的margin不與任何margin發(fā)生折疊,并且與它的子元素之間的margin也不會發(fā)生折疊

解決折疊的方法:
  • 外層元素用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;

}


今天就介紹這么多,如有錯誤,歡迎指正!

以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號