關于CSS一些細節問題

yedf 發布于2019-08-30 13:16 / 2911人閱讀

摘要：本文是年的最后一篇文章，主要是將一些細節問題整理一下。垂直百分比的值等于容器高度百分比值減去背景圖片高度百分比值。如果兩者同時存在時，只有起作用如果兩者同時存在時，只有起作用。

本文是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起作用。

看一個例子：

從上面的代碼和效果圖，你可以看出，設置了position:relative的元素設置了top:20px，雖然（相對其原位置）向下移動了20px，可是并不會影響其后面的元素。

4、覆蓋樣式問題

比如我們有一個公共文件，其下有一個公共樣式：

.box {
  color: red;
}

有些時候，我們需要覆蓋這個樣式，比如將紅色改為綠色。由于是公共元素，我們不能直接修改，但方法還是有多種：

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

上面這些是我們常用的，但還有一個小技巧，是我們平常不太注意的，可以如下設置：

.box.box {
  color: green;
}

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

原文鏈接：關于CSS一些細節問題

云服務器 GPU云服務器關于php問題關于javascript的問題關于php的問題關于webview顯示問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115436.html

一次搞清楚移動端適配這幾個坑爹的單位慨念

摘要：真的是給我們新手學習移動端適配造成不少困惑英語真的很重要呀。細節高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。一次搞清楚移動端這幾個坑爹的單位慨念目錄: 一、讓坑爹的單位,不再坑爹二、需要準備什么樣的設計稿三、rem方案的原理和細節高清屏上,位圖的處理高清屏上,關于border: 1px的處理移動端屏幕的自動適配的處理移動端屏幕上字體大小的處理...

objc94 2019-08-30 14:05 評論0 收藏0
一次搞清楚移動端適配這幾個坑爹的單位慨念

摘要：真的是給我們新手學習移動端適配造成不少困惑英語真的很重要呀。細節高清屏上的處理其實并不是所有做移動端適配的人都一定會遇到這個問題。一次搞清楚移動端這幾個坑爹的單位慨念目錄: 一、讓坑爹的單位,不再坑爹二、需要準備什么樣的設計稿三、rem方案的原理和細節高清屏上,位圖的處理高清屏上,關于border: 1px的處理移動端屏幕的自動適配的處理移動端屏幕上字體大小的處理...

elva 2019-08-22 15:05 評論0 收藏0
關于 emotion 初步使用的筆記

摘要：群里聽達峰大大講用的是的方案留了個心眼之前查看過一些方案大致看過不知道哪個比較好但是既然有實踐經驗而且當時也是我看中的幾個之一覺得比較安全從寫法上看侵入性比較小直接就是然后生成的是基于的包裹的插入在當中的這樣運行時甚至熱替換時沒有什么問群里聽達峰大大講 Strikingly 用的是 emotion 的方案, 留了個心眼.之前查看過一些 CSS in JS 方案, 大致看過 emoti...

derek_334892 2019-08-29 13:47 評論0 收藏0
你所不知道的 CSS 陰影技巧與細節

摘要：本文的題目是陰影技巧與細節。立體投影好，我們繼續。下一個主題是立體投影。但是，使用它們生成的陰影通常只能是單色或者同色系的。你這么說，難道還可以生成漸變色的陰影不成額，當然不行。關于 CSS 陰影，之前已經有寫過一篇，box-shadow 與 filter:drop-shadow 詳解及奇技淫巧，介紹了一些關于 box-shadow 的用法。最近一個新的項目，CSS-Inspira...

supernavy 2019-08-29 17:12 評論0 收藏0