FE.CSS-容易疏忽的CSS細節

flex-grow 與 flex-shrink 分配空間的計算規則

flex-grow 屬性決定了父元素在空間分配方向上還有剩餘空間時，如何分配這些剩餘空間。

1. 好比剩餘空間爲 x，三個元素的 flex-grow 分別爲 a，b，c。設 sum 爲 a + b + c。那麼三個元素將獲得剩餘空間分別是 x a / sum, x b / sum, x * c / sum，是爲權重也。
2. 當全部元素的 flex-grow 之和小於 1 的時候（注意是 1，也就是說每一個元素的 flex-grow 都是一個小數如 0.2 這樣的），上面式子中的 sum 將會使用 1 來參與計算，而不論它們的和是多少。也就是說，當全部的元素的 flex-grow 之和小於 1 的時候，實際上用來分配的空間是 sum(flex-grow) / 1 * 剩餘空間，這些用來分配的空間依然是按 flex-grow 的比例來分配。
3. 若是最終 grow 後的結果大於 max-width 指定的值，max-width 的值將會優先使用。一樣會致使父元素有部分剩餘空間沒有分配。

flex-shrink 能夠在空間不夠時讓各個子元素收縮以適應有限的空間

1. 每一個元素收縮的權重爲其 flex-shrink 乘以其寬度。
2. 當全部元素的 flex-shrink 之和小於 1 時，只會收縮 flex-shrink 之和相對於 1 的比例的空間。
3. 相似 flex-grow，flex-shrink 也會受到 min-width 的影響。

百分比值

vertical-align的百分比值是相對於line-height計算的。

{
  line-height: 30px;
/*vertical-align: -10% */  
  vertical-align: -3px;    
}

margin和padding的百分比值是相對於父元素的width計算的。

.parent{width:100px}
.child{
    margin-bottom:10%;/*10px*/
    padding-bottom:10%;
}

幽靈空白節點

在HTML5文檔聲明下，塊狀元素內部的內聯元素的行爲表現，就好像塊狀元素內部還有一個（更有可能兩個-先後）看不見摸不着沒有寬度沒有實體的空白節點，這個假想又彷佛存在的空白節點，稱之爲「幽靈空白節點」。

block>inline

<div style="background-color:#e5edff;"><img src="mm1.jpg"></div>

緣由：vertical-align默認值是baseline,致使下方留空
解決方案：

• 讓vertical-align失效：img { display: block; }
• 使用其餘vertical-align值：bottom/middle/top
• 修改line-height值足夠小：div { line-height: 5px; }
• 修改font-size:div { font-size: 0; }

inline-block + inline-block

.dib-baseline {
  display: inline-block; width: 150px; height: 150px;
  border: 1px solid #cad5eb; background-color: #f0f3f9;
}

<span class="dib-baseline"></span>
<span class="dib-baseline">x-baseline</span>

緣由：一個inline-block元素，若是裏面沒有inline內聯元素，或者overflow不是visible，則該元素的基線就是其margin底邊緣，不然，其基線就是元素裏面最後一行內聯元素的基線。
解決方案：

• 改造元素的基線:空元素隨便放幾個字符
• 改造「幽靈空白節點」的基線位置：font-size:0
• 使用其餘vertical-align對齊方式:bottom/middle/top

滾動

實現幻燈片滾動終止定位

• 父元素scroll-snap-type:x mandatory
• 子元素scroll-snap-align:center

實現平滑滾動

• scroll-behavior:smooth

滾動回彈

-webkit-overflow-scrolling:auto使用普通滾動, 當手指從觸摸屏上移開，滾動會當即中止。
-webkit-overflow-scrolling:touch 使用具備回彈效果的滾動, 當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。同時也會建立一個新的堆棧上下文。

• bug:

  • 滾動中 scrollTop 屬性不會變化
  • 手勢可穿過其餘元素觸發元素滾動
  • 滾動時暫停其餘 transition

ios的fixed佈局抖動解決方案

• -webkit-overflow-scrolling:touch
• 在main上使用fixed定位，加上overflow-y屬性。
• 中間的main不設定位，高度100%，再padding頭部和尾部
• 三方庫 iScroll 或 better-scroll

自定義屬性

搭配動畫使用

@keyframes var {
    33% { --someVar: 33%; }
    66% { --someVar: 66%; }
}

搭配計數器使用

.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress);
}

無效狀況

/* 無效 */
.bar::before {
    content: var(--percent);
}

計數器

初始化

/* 計數器名稱是'small-apple', 而且默認起始值是2 */
.xxx { counter-reset: small-apple 2; }

多個計數器同時命名

/*多個計數器同時命名*/
.xxx { counter-reset: wangxiaoer 2 wangxiaosan 3; }

計數與顯示

.counter { counter-reset: wangxiaoer 2; counter-increment: wangxiaoer; }
.counter:before { content: counter(wangxiaoer); }

style-type

content: counter(wangxiaoer, lower-roman); 
/* 以小寫羅馬數字格式表示當前計數器wangxiaoer的值 */

拼接文字

{
   counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    width: calc(1% * var(--percent));
}

普照規則

計數器的數值變化遵循HTML渲染順序，遇到一個increment計數器就變化，何時counter輸出就輸出此時的計數值。

失效狀況

display的屬性值是none或者含有hidden屬性（針對支持瀏覽器），則此計數值是不會增長的。而visibility:hidden以及其餘聲明不會有此現象。

css權重

權重等級
一、行內樣式style
二、ID選擇器
三、類，屬性選擇器和僞類選擇器
四、元素和僞元素

規則:相同的權重：後出現的選擇器生效;不一樣的權重，權重值高則生效

01. *{}                         ====》0
02. li{}                        ====》1(一個元素)
03. li:first-line{}             ====》2(一個元素，一個僞元素)
04. ul li {}                    ====》2（兩個元素）
05. ul ol+li{}                  ====》3（三個元素）
06. h1+ *[rel=up] {}            ====》11（一個屬性選擇器，一個元素）
07. ul ol li.red{}              ====》13（一個類，三個元素）
08. li.red.level{}              ====》21（兩個類，一個元素）
09. style=""                    ====》1000(一個行內樣式)
10. p {}                        ====》1（一個元素）
11. div p {}                    ====》2（兩個元素）
12. .sith {}                    ====》10（一個類）
13. div p.sith{}                ====》12（一個類，兩個元素）
14. #sith{}                     ====》100（一個ID選擇器）
15. body #darkside .sith p {}   ====》112(1+100+10+1,一個Id選擇器，一個類，兩個元素)

position與佈局

• static：無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用。
• relative：對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。
• absolute：對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。
• fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性定義。
• sticky：當元素在屏幕內，表現爲relative，就要滾出顯示器屏幕的時候，表現爲fixed。

BFC與摺疊margin細則

BFC知足條件：

• float的值不爲」none」
• overflow的值不爲」visible」
• display的值爲 「table-cell」, 「table-caption」, or 「inline-block」中的任何一個
• position的值不爲 「static」 或 「relative」中的任何一個

摺疊margin觸發條件:

• 這些margin都處於普通流中，並在同一個BFC中；
• 這些margin沒有被非空內容、padding、border 或 clear 分隔開；

• 這些margin在垂直方向上是毗鄰的，包括如下幾種狀況：

  • 一個box的top margin與第一個子box的top margin
  • 一個box的bottom margin與最後一個子box的bottom margin，但須在該box的height爲auto的狀況下
  • 一個box的bottom margin與緊接着的下一個box的top margin
  • 一個box的top margin與其自身的bottom margin，但須知足沒建立BFC、零min-height、零或者「auto」的height、沒有普通流的子box
• 根元素的外邊距不會參與摺疊

BFC做用

• BFC能夠阻止垂直邊距疊加問題
• BFC能夠包含內部元素的浮動
• BFC能夠阻止元素被浮動覆蓋
• BFC能夠決定清除浮動的範圍

IFC規則

• 在行內格式化上下文中，框一個接一個地水平排列，起點是包含塊的頂部。
• 水平方向上的 margin，border 和 padding 在框之間獲得保留
• 框在垂直方向上能夠以不一樣的方式對齊：它們的頂部或底部對齊，或根據其中文字的基線對齊

參考資料

詳解 flex-grow 與 flex-shrink
css學習專題-BFC
深刻研究-webkit-overflow-scrolling:touch及ios滾動
CSS深刻理解vertical-align和line-height的基友關係
CSS counter計數器(content目錄序號自動遞增)詳解
殺了個回馬槍，仍是說說position:sticky吧
你應該知道的一些事情——CSS權重